justify-content প্রপার্টি

justify-content প্রপার্টিটি ফ্লেক্স ব্লকগুলোর জন্য প্রধান অক্ষ বরাবর এবং গ্রিডের জন্য অনুভূমিক অক্ষ বরাবর এলিমেন্টগুলোর এলাইনমেন্ট নির্ধারণ করে। এটি প্যারেন্ট এলিমেন্টে প্রয়োগ করা হয়।

সিনট্যাক্স

cssসিলেক্টর {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

মানসমূহ

ডিফল্ট মান: flex-start।

উদাহরণ . flex-start মান

বর্তমানে অক্ষটি বাম থেকে ডানে নির্দেশিত (এটি করে flex-direction: row), এবং ব্লকগুলো বাম দিকে চেপে আছে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . flex-end মান

এই উদাহরণে অক্ষটিও বাম থেকে ডানে নির্দেশিত, কিন্তু ব্লকগুলো ডান দিকে চেপে আছে, কারণ justify-content-এ মান flex-end দেওয়া হয়েছে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: flex-end;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . center মান

বর্তমানে ব্লকগুলো কেন্দ্রে অবস্থান করবে প্রধান অক্ষের দিক নির্বিশেষে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . space-between মান

ব্লকগুলো প্রধান অক্ষ বরাবর বণ্টিত, এ ক্ষেত্রে প্রথম এলিমেন্ট অক্ষের শুরুতে এবং শেষ এলিমেন্ট অক্ষের শেষে চেপে আছে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . space-around মান

ব্লকগুলো প্রধান অক্ষ বরাবর বণ্টিত, এ ক্ষেত্রে প্রথম ব্লক এবং অক্ষের শুরু, শেষ ব্লক এবং অক্ষের শেষে একই ফাঁকা স্থান, যেটা বাকি ব্লকগুলোর মধ্যকার ফাঁকা স্থানের সমান। যাইহোক, ফাঁকা স্থান যোগ হয় এবং দুইটি ব্লকের মধ্যকার দূরত্ব একটি ব্লক এবং অক্ষের শুরু/শেষের মধ্যকার দূরত্বের দ্বিগুণ:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . center মান. অক্ষ নিচের দিকে

প্রধান অক্ষের দিক পরিবর্তন করি, flex-direction-এ মান column দিয়ে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . space-between মান. অক্ষ নিচের দিকে

বর্তমানে ব্লকগুলো উল্লম্বভাবে সমানভাবে বণ্টিত হবে:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 400px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . অনুভূমিক অক্ষের শুরু বরাবর এলাইনমেন্ট (সারি) গ্রিডে

আসুন আমাদের এলিমেন্টগুলোর জন্য অনুভূমিক অক্ষের শুরু বরাবর এলাইনমেন্ট সেট করি:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: start;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . অনুভূমিক অক্ষের কেন্দ্র বরাবর এলাইনমেন্ট গ্রিডে

এবং এখন আমাদের এলিমেন্টগুলোর জন্য অনুভূমিক অক্ষের কেন্দ্র বরাবর এলাইনমেন্ট সেট করি:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: center;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

উদাহরণ . অনুভূমিক অক্ষের শেষ বরাবর এলাইনমেন্ট গ্রিডে

আসুন আমাদের এলিমেন্টগুলোর জন্য অনুভূমিক অক্ষের শেষ বরাবর এলাইনমেন্ট সেট করি:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  display: grid;
  justify-content: end;
  grid-template-columns: 100px 100px;
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

আরও দেখুন