Individual Flex Items এর অ্যালাইনমেন্ট কনফিগারেশন

Flexbox লেআউট সিস্টেমে Flex Items-এর অবস্থান নির্ধারণে অনেক গুরুত্বপূর্ণ প্রপার্টি ব্যবহৃত হয়। তবে কখনো কখনো Flex Items-এর প্রতিটির অবস্থান আলাদাভাবে নির্ধারণ করতে হয়। এজন্য align-self প্রপার্টি ব্যবহার করা হয়, যা একক Flex Item-এর জন্য vertical alignment (উল্লম্ব অক্ষে অবস্থান) নির্ধারণ করে।

এছাড়া, Flexbox-এর মাধ্যমে Flex Items গুলোকে অনুভূমিকভাবে (horizontal) কিভাবে সাজানো হবে তা justify-content প্রপার্টি দ্বারা নিয়ন্ত্রণ করা হয়।

Individual Flex Items এর Alignment কনফিগারেশন:

1. Align-self (উল্লম্ব অক্ষে অবস্থান)

align-self প্রপার্টি Flex Items-এর জন্য বিশেষভাবে ব্যবহার হয় যখন আপনি Flex Items-এর অবস্থান Flex Container-এর align-items প্রপার্টির থেকে আলাদা করতে চান। এটি শুধুমাত্র একক Flex Item-এর জন্য কাজ করে এবং সেই আইটেমটি কন্টেইনারের উল্লম্ব অক্ষে সঠিকভাবে বিন্যস্ত করে।

Align-self-এর মানসমূহ:

1. auto (ডিফল্ট):
   • Flex Item কন্টেইনারের align-items প্রপার্টির মান অনুসরণ করে।
2. flex-start:
   • Flex Item কন্টেইনারের শীর্ষে (উপরে) অবস্থান করবে।
3. flex-end:
   • Flex Item কন্টেইনারের তলায় (নিচে) অবস্থান করবে।
4. center:
   • Flex Item কন্টেইনারের উল্লম্বভাবে কেন্দ্রে অবস্থান করবে।
5. baseline:
   • Flex Item তার বেসলাইন (লাইন যেখানে লেখা শুরু হয়) অনুযায়ী কন্টেইনারের অন্যান্য আইটেমের সাথে সারিবদ্ধ হবে।
6. stretch (ডিফল্ট):
   • Flex Item তার উচ্চতা কন্টেইনারের উচ্চতা অনুযায়ী প্রসারিত হবে (যদি কন্টেইনারের উচ্চতা নির্দিষ্ট থাকে)।

উদাহরণ:

HTML:

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

CSS:

.flex-container {
  display: flex;
  height: 200px;
  background-color: lightgray;
  align-items: flex-start; /* কন্টেইনারের আইটেমগুলো উপরের দিকে সাজানো */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  margin: 5px;
}

.special {
  align-self: center; /* এই আইটেমটি কন্টেইনারের কেন্দ্রবিন্দুতে থাকবে */
}

আউটপুট:

• Item 1 এবং Item 3 কন্টেইনারের শীর্ষে (উপরে) অবস্থান করবে (যেহেতু align-items: flex-start; ব্যবহার করা হয়েছে), কিন্তু Item 2 কন্টেইনারের কেন্দ্রে অবস্থান করবে (যেহেতু align-self: center; ব্যবহার করা হয়েছে)।

2. Justify-content (অনুভূমিক অক্ষে অবস্থান)

justify-content প্রপার্টি Flex Container-এর মধ্যে আইটেমগুলোর অনুভূমিক (horizontal) বিন্যাস নিয়ন্ত্রণ করে। এটি সাধারণত কন্টেইনারের মধ্যে অতিরিক্ত স্থান ব্যবস্থাপনা করতে ব্যবহৃত হয়।

Justify-content-এর মানসমূহ:

1. flex-start:
   • Flex Items গুলি কন্টেইনারের শুরুতে (বামে) থাকবে।
2. flex-end:
   • Flex Items গুলি কন্টেইনারের শেষের দিকে (ডানে) থাকবে।
3. center:
   • Flex Items গুলি কন্টেইনারের কেন্দ্রে থাকবে।
4. space-between:
   • Flex Items গুলোর মধ্যে সমান দূরত্ব থাকবে, কিন্তু প্রথম এবং শেষ আইটেম কন্টেইনারের শুরু এবং শেষের দিকে থাকবে।
5. space-around:
   • Flex Items গুলোর মধ্যে সমান স্থান থাকবে, তবে প্রথম এবং শেষ আইটেমের চারপাশে অর্ধেক জায়গা থাকবে।
6. space-evenly:
   • Flex Items গুলোর মধ্যে সমান দূরত্ব থাকবে, এবং প্রথম এবং শেষ আইটেমের মধ্যেও সমান স্থান থাকবে।

উদাহরণ:

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:

.flex-container {
  display: flex;
  justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান দূরত্ব থাকবে */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  margin: 5px;
}

আউটপুট:

• Flex Items গুলোর মধ্যে সমান দূরত্ব থাকবে এবং প্রথম এবং শেষ আইটেম কন্টেইনারের শুরু এবং শেষের দিকে থাকবে (যেহেতু justify-content: space-between; ব্যবহার করা হয়েছে)।

Align-items এবং Align-self মধ্যে পার্থক্য

• align-items: এটি Flex Container-এর জন্য কাজ করে এবং সমস্ত Flex Items-এর জন্য একটি সাধারণ অ্যালাইনমেন্ট কনফিগারেশন সরবরাহ করে।
• align-self: এটি একক Flex Item-এর জন্য কাজ করে এবং সেটি কন্টেইনারের সাধারণ align-items প্রপার্টির মান থেকে ভিন্নভাবে অবস্থান নির্ধারণ করতে সাহায্য করে।

সারাংশ

Flexbox-এর align-self প্রপার্টি ব্যবহার করে আপনি Flex Items-এর জন্য একক অ্যালাইনমেন্ট কনফিগারেশন করতে পারেন। এটি Flex Items-এর অবস্থানকে Flex Container-এর align-items প্রপার্টির থেকে আলাদা করার সুযোগ দেয়, যা লেআউট ডিজাইনকে আরও নমনীয় এবং কাস্টমাইজড করে তোলে। Justify-content প্রপার্টি আইটেমগুলোর অনুভূমিক বিন্যাস নিয়ন্ত্রণ করতে সহায়ক। Flexbox-এর এই দুটি প্রপার্টি একত্রে ব্যবহার করে আপনি উপাদানগুলোর অবস্থান ও বিন্যাস সহজেই নির্ধারণ করতে পারেন।