flex-start, flex-end, center, space-between, space-around, এবং stretch এর ব্যবহার

Flexbox-এর justify-content এবং align-items প্রপার্টি গুলি ব্যবহার করে উপাদানগুলোর বিন্যাস এবং স্থান নিয়ন্ত্রণ করা যায়। এই প্রপার্টিগুলোর মান হিসেবে flex-start, flex-end, center, space-between, space-around, এবং stretch ব্যবহার করা হয়। এগুলোর সাহায্যে আপনি উপাদানগুলোর স্থান এবং বিন্যাস নিয়ন্ত্রণ করতে পারবেন।

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

justify-content প্রপার্টি Flex Container-এর অনুভূমিক অক্ষে (horizontal axis) উপাদানগুলোর স্থান এবং বিন্যাস নির্ধারণ করে।

1. flex-start

• ব্যবহার: উপাদানগুলো কন্টেইনারের শুরুতে, অর্থাৎ বাম দিকের দিকে বিন্যস্ত হবে।
• বর্ণনা: এটি justify-content এর ডিফল্ট মান।

.flex-container {
  display: flex;
  justify-content: flex-start; /* উপাদানগুলো বাম দিকের দিকে সাজানো */
}

2. flex-end

• ব্যবহার: উপাদানগুলো কন্টেইনারের শেষে, অর্থাৎ ডান দিকের দিকে বিন্যস্ত হবে।
• বর্ণনা: এটি উপাদানগুলোকে ডানদিকে নিয়ে যায়।

.flex-container {
  display: flex;
  justify-content: flex-end; /* উপাদানগুলো ডান দিকের দিকে সাজানো */
}

3. center

• ব্যবহার: উপাদানগুলো কন্টেইনারের মাঝখানে (center) বিন্যস্ত হবে।
• বর্ণনা: এটি উপাদানগুলোকে অনুভূমিকভাবে কেন্দ্রীভূত করে।

.flex-container {
  display: flex;
  justify-content: center; /* উপাদানগুলো কেন্দ্রে সাজানো */
}

4. space-between

• ব্যবহার: উপাদানগুলোর মধ্যে সমান স্থান সৃষ্টি করা হবে, এবং প্রথম এবং শেষ উপাদান কন্টেইনারের প্রান্তে থাকবে।
• বর্ণনা: উপাদানগুলোর মধ্যে সবচেয়ে বেশি স্থান তৈরি করবে।

.flex-container {
  display: flex;
  justify-content: space-between; /* উপাদানগুলোর মধ্যে সমান স্থান */
}

5. space-around

• ব্যবহার: উপাদানগুলোর মধ্যে সমান পরিমাণ ফাঁকা জায়গা থাকবে, তবে প্রান্তে ছোট স্থান থাকবে।
• বর্ণনা: উপাদানগুলোর চারপাশে সমান পরিমাণ গ্যাপ থাকবে।

.flex-container {
  display: flex;
  justify-content: space-around; /* উপাদানগুলোর চারপাশে সমান পরিমাণ ফাঁকা জায়গা */
}

6. stretch

• ব্যবহার: উপাদানগুলোর আকার কন্টেইনারের পুরো গ্যাপ অনুসারে প্রসারিত হবে।
• বর্ণনা: এটি align-items এর জন্য ব্যবহৃত হয় এবং উপাদানগুলোকে উল্লম্বভাবে প্রসারিত করে কন্টেইনারের উচ্চতা পূর্ণ করে।

.flex-container {
  display: flex;
  justify-content: stretch; /* উপাদানগুলো প্রসারিত হবে */
}

align-items প্রপার্টি

align-items প্রপার্টি Flex Container-এর উল্লম্ব অক্ষে (vertical axis) উপাদানগুলোর বিন্যাস এবং স্থান নিয়ন্ত্রণ করে।

1. flex-start

• ব্যবহার: উপাদানগুলো কন্টেইনারের উপরের অংশে (উল্লম্বভাবে শুরুতে) বিন্যস্ত হবে।

.flex-container {
  display: flex;
  align-items: flex-start; /* উপাদানগুলো উপরের দিকে সাজানো */
}

2. flex-end

• ব্যবহার: উপাদানগুলো কন্টেইনারের নিচের অংশে (উল্লম্বভাবে শেষে) বিন্যস্ত হবে।

.flex-container {
  display: flex;
  align-items: flex-end; /* উপাদানগুলো নিচে সাজানো */
}

3. center

• ব্যবহার: উপাদানগুলো কন্টেইনারের মাঝে উল্লম্বভাবে কেন্দ্রীভূত হবে।

.flex-container {
  display: flex;
  align-items: center; /* উপাদানগুলো কেন্দ্রে সাজানো */
}

4. stretch

• ব্যবহার: উপাদানগুলো কন্টেইনারের পুরো উচ্চতা দখল করবে এবং প্রসারিত হবে।

.flex-container {
  display: flex;
  align-items: stretch; /* উপাদানগুলো প্রসারিত হবে */
}

উদাহরণ সহ ব্যাখ্যা

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 এবং align-items ব্যবহার):

.flex-container {
  display: flex;
  justify-content: space-between; /* অনুভূমিকভাবে সমান জায়গা */
  align-items: center; /* উল্লম্বভাবে কেন্দ্রীভূত */
  height: 200px; /* কন্টেইনারের উচ্চতা নির্ধারণ */
  background-color: lightgray;
}

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

আউটপুট:

• justify-content: space-between; — উপাদানগুলো অনুভূমিকভাবে সমানভাবে স্থান বিতরণ করবে এবং প্রথম এবং শেষ উপাদান কন্টেইনারের প্রান্তে থাকবে।
• align-items: center; — উপাদানগুলো কন্টেইনারের উল্লম্ব কেন্দ্রে অবস্থান করবে।

সারাংশ

• justify-content প্রপার্টি অনুভূমিক (horizontal) অক্ষে Flex Items-এর স্থান ও বিন্যাস নিয়ন্ত্রণ করে।
• align-items প্রপার্টি উল্লম্ব (vertical) অক্ষে Flex Items-এর স্থান ও বিন্যাস নিয়ন্ত্রণ করে।
• flex-start, flex-end, center, space-between, space-around, এবং stretch মানগুলো ব্যবহার করে আপনি Flex Items-এর অবস্থান এবং স্থান সহজে নিয়ন্ত্রণ করতে পারেন, যা ডিজাইনে আরও নমনীয়তা এবং আকর্ষণীয়তা আনে।