flex-start, flex-end, center, space-between, space-around, এবং

Flexbox লেআউট মডেলে, justify-content প্রপার্টি এবং এর বিভিন্ন মান (যেমন flex-start, flex-end, center, space-between, space-around) ব্যবহার করে Flex Items-এর মধ্যে অনুভূমিক (horizontal) স্থান এবং বিন্যাস নিয়ন্ত্রণ করা যায়। এই প্রপার্টি ব্যবহার করে আপনি Flex Items-এর মধ্যে স্থান সামঞ্জস্য করতে এবং তাদের সঠিকভাবে সাজাতে পারেন।

1. flex-start

• বিবরণ: flex-start মান ব্যবহার করলে Flex Items গুলো কন্টেইনারের বাম প্রান্তে সাজানো হয়। এটি হলো ডিফল্ট মান যখন justify-content প্রপার্টি সেট করা না থাকে।
• ব্যবহার: Flex Items-গুলো কন্টেইনারের বাম দিকে অবস্থান করবে এবং তাদের মধ্যে কোনও অতিরিক্ত জায়গা থাকবে না।

.flex-container {
  display: flex;
  justify-content: flex-start;
}

2. flex-end

• বিবরণ: flex-end মান ব্যবহার করলে Flex Items গুলো কন্টেইনারের ডান প্রান্তে সাজানো হয়।
• ব্যবহার: Flex Items-গুলো কন্টেইনারের ডান দিকে সঞ্চিত হবে এবং বাকি জায়গা বাম দিকে থাকবে।

.flex-container {
  display: flex;
  justify-content: flex-end;
}

3. center

• বিবরণ: center মান ব্যবহার করলে Flex Items গুলো কন্টেইনারের মধ্যে অনুভূমিকভাবে সেন্টার করা হয়।
• ব্যবহার: Flex Items গুলো কন্টেইনারের মধ্যে সঠিকভাবে কেন্দ্রীভূত হয়, যা অনেক ওয়েব ডিজাইনে জনপ্রিয়।

.flex-container {
  display: flex;
  justify-content: center;
}

4. space-between

• বিবরণ: space-between মান ব্যবহার করলে Flex Items-এর মধ্যে সমান জায়গা (spacing) তৈরি হয়, তবে প্রথম এবং শেষ আইটেমের মধ্যে কোনও অতিরিক্ত জায়গা থাকবে না।
• ব্যবহার: এটি অনেক সময় ব্যবহার করা হয় যখন আপনাকে Flex Items গুলোর মধ্যে স্থান ভাগ করতে হবে, তবে কন্টেইনারের প্রান্তগুলোতে কোনও অতিরিক্ত জায়গা থাকবে না।

.flex-container {
  display: flex;
  justify-content: space-between;
}

5. space-around

• বিবরণ: space-around মান ব্যবহার করলে Flex Items-এর মধ্যে সমান জায়গা (spacing) তৈরি হয় এবং প্রতিটি আইটেমের চারপাশে সমান প্যাডিং থাকবে।
• ব্যবহার: Flex Items গুলোর মধ্যে সমান জায়গা থাকবে, এবং প্রথম ও শেষ আইটেমের চারপাশে কিছু অতিরিক্ত জায়গা থাকবে।

.flex-container {
  display: flex;
  justify-content: space-around;
}

6. space-evenly

• বিবরণ: space-evenly মান ব্যবহার করলে Flex Items-এর মধ্যে সমান জায়গা তৈরি হয়, যেখানে প্রথম ও শেষ আইটেমের প্রান্তগুলোতেও সমান জায়গা থাকে।
• ব্যবহার: যখন আপনাকে Flex Items গুলোর মধ্যে এবং কন্টেইনারের প্রান্তে সমান জায়গা চান।

.flex-container {
  display: flex;
  justify-content: space-evenly;
}

উদাহরণ: justify-content প্রপার্টির বিভিন্ন মান

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

CSS (প্রতিটি justify-content মানের জন্য):

.flex-container {
  display: flex;
  width: 100%;
  background-color: lightgray;
  height: 100px;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  text-align: center;
}

.flex-container.flex-start {
  justify-content: flex-start;
}

.flex-container.flex-end {
  justify-content: flex-end;
}

.flex-container.center {
  justify-content: center;
}

.flex-container.space-between {
  justify-content: space-between;
}

.flex-container.space-around {
  justify-content: space-around;
}

.flex-container.space-evenly {
  justify-content: space-evenly;
}

আউটপুট:

• flex-start: সব আইটেম কন্টেইনারের বাম দিকে থাকবে।
• flex-end: সব আইটেম কন্টেইনারের ডান দিকে থাকবে।
• center: আইটেমগুলো কন্টেইনারের মাঝে থাকবে।
• space-between: আইটেমগুলোর মধ্যে সমান দূরত্ব থাকবে, কিন্তু প্রথম এবং শেষ আইটেমের মধ্যে কোনো জায়গা থাকবে না।
• space-around: আইটেমগুলোর চারপাশে সমান জায়গা থাকবে।
• space-evenly: আইটেমগুলোর মধ্যে এবং কন্টেইনারের প্রান্তে সমান জায়গা থাকবে।

সারাংশ

justify-content প্রপার্টির মাধ্যমে Flexbox লেআউটে Flex Items-এর মধ্যে স্থান এবং বিন্যাস নিয়ন্ত্রণ করা হয়। flex-start, flex-end, center, space-between, space-around, এবং space-evenly প্রতিটি মান Flex Items-এর মধ্যে স্থান নির্ধারণে সহায়ক, যা ওয়েব ডিজাইনকে আরও নমনীয় এবং কার্যকরী করে তোলে।