align-items প্রপার্টির ভূমিকা

align-items কী?

align-items হলো Flexbox-এর একটি প্রপার্টি যা Flex Container-এর ভেতরে থাকা Flex Items-এর উল্লম্ব (vertical) বিন্যাস নিয়ন্ত্রণ করে। এটি নির্ধারণ করে যে, Flex Items কিভাবে Flex Container-এর উল্লম্ব অক্ষে (cross axis) সাজানো হবে। এর মাধ্যমে আপনি Flex Items-কে Flex Container-এর শীর্ষ, কেন্দ্র বা নিচে সোজা করতে পারেন।

align-items এর মানসমূহ

1. stretch (ডিফল্ট):

   • Flex Items গুলি Flex Container-এর উল্লম্ব আকার অনুযায়ী নিজস্ব উচ্চতা প্রসারিত করে। এটি ডিফল্ট মান, এবং যদি Flex Items-এর উচ্চতা নির্ধারিত না থাকে, তবে তারা কন্টেইনারের পুরো উচ্চতা দখল করবে।

   .flex-container {
     display: flex;
     align-items: stretch; /* Flex Items পুরো কন্টেইনারের উচ্চতা দখল করবে */
   }
   

2. flex-start:

   • Flex Items গুলি Flex Container-এর শীর্ষে সজ্জিত হবে।

   .flex-container {
     display: flex;
     align-items: flex-start; /* আইটেমগুলো শীর্ষে সজ্জিত হবে */
   }
   

3. flex-end:

   • Flex Items গুলি Flex Container-এর নিচে সজ্জিত হবে।

   .flex-container {
     display: flex;
     align-items: flex-end; /* আইটেমগুলো নিচে সজ্জিত হবে */
   }
   

4. center:

   • Flex Items গুলি Flex Container-এর উল্লম্ব অক্ষে সেন্টারে সজ্জিত হবে।

   .flex-container {
     display: flex;
     align-items: center; /* আইটেমগুলো উল্লম্বভাবে কেন্দ্রিত হবে */
   }
   

5. baseline:

   • Flex Items গুলি তাদের টেক্সটের বেসলাইন অনুযায়ী সজ্জিত হবে, অর্থাৎ আইটেমগুলো এমনভাবে সাজানো হবে যে, তাদের টেক্সটের বেসলাইন এক সারিতে আসবে।

   .flex-container {
     display: flex;
     align-items: baseline; /* টেক্সটের বেসলাইন অনুযায়ী সজ্জিত হবে */
   }
   

align-items প্রপার্টির ভূমিকা

1. Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ:

align-items Flex Container-এর ভিতরে Flex Items গুলোর উল্লম্ব অবস্থান নিয়ন্ত্রণ করে। এটি খুবই গুরুত্বপূর্ণ যখন আপনি Flex Items গুলোকে সঠিকভাবে সজ্জিত করতে চান, বিশেষত তাদের উল্লম্ব অবস্থান ঠিক করতে। উদাহরণস্বরূপ, আপনি চাইলে আইটেমগুলোকে শীর্ষে, কেন্দ্রে বা নিচে সজ্জিত করতে পারেন।

2. নমনীয় লেআউট তৈরি:

Flexbox-এ align-items ব্যবহার করে আপনি সহজেই রেস্পন্সিভ এবং নমনীয় লেআউট তৈরি করতে পারেন, যেখানে Flex Items সঠিকভাবে বিন্যস্ত থাকবে। উদাহরণস্বরূপ, ছোট স্ক্রীনে Flex Items উল্লম্বভাবে কেন্দ্রিত করা যেতে পারে, যা বড় স্ক্রীনে পরিবর্তিত হতে পারে।

3. Flex Items-এর একসাথে অবস্থান ঠিক করা:

একাধিক Flex Items-এর জন্য একযোগে উল্লম্ব বিন্যাস নিশ্চিত করা খুব সহজ। আপনি align-items প্রপার্টির মাধ্যমে সমস্ত Flex Items-এর জন্য একটি সাধারণ বিন্যাস নির্ধারণ করতে পারেন।

4. সুবিধাজনক এবং সুসংহত ডিজাইন:

এটি ওয়েব ডিজাইনারদের জন্য একটি শক্তিশালী টুল, যা তাদেরকে দ্রুত এবং সহজভাবে আইটেমগুলোর উল্লম্ব বিন্যাসের জন্য কন্ট্রোল দেয়। বিশেষ করে বিভিন্ন সেকশনের মধ্যে আইটেমগুলোর অবস্থান সমানভাবে ঠিক করা যায়।

align-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 (align-items: flex-start):

.flex-container {
  display: flex;
  align-items: flex-start; /* শীর্ষে সজ্জিত হবে */
}

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

CSS (align-items: center):

.flex-container {
  display: flex;
  align-items: center; /* কেন্দ্রে সজ্জিত হবে */
}

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

CSS (align-items: flex-end):

.flex-container {
  display: flex;
  align-items: flex-end; /* নিচে সজ্জিত হবে */
}

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

CSS (align-items: baseline):

.flex-container {
  display: flex;
  align-items: baseline; /* টেক্সটের বেসলাইন অনুযায়ী সজ্জিত হবে */
}

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

সারাংশ

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