Vertical অক্ষ বরাবর আইটেমের অবস্থান নিয়ন্ত্রণ

Flexbox-এ Vertical অক্ষ বরাবর (অর্থাৎ উল্লম্বভাবে) আইটেমগুলোর অবস্থান নিয়ন্ত্রণ করা খুবই সহজ এবং এটি align-items এবং align-self প্রপার্টি ব্যবহার করে করা হয়। Flexbox ব্যবহারের মাধ্যমে আপনি একাধিক উপাদানকে সঠিকভাবে উল্লম্বভাবে বিন্যস্ত করতে পারেন।

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

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

align-items এর মান:

1. flex-start
   Flex Items গুলি কন্টেইনারের উপরের অংশে সাজানো হয়।

   .flex-container {
     display: flex;
     align-items: flex-start; /* উপরের দিকে অবস্থান */
   }
   

2. flex-end
   Flex Items গুলি কন্টেইনারের নিচের অংশে সাজানো হয়।

   .flex-container {
     display: flex;
     align-items: flex-end; /* নিচের দিকে অবস্থান */
   }
   

3. center
   Flex Items গুলি কন্টেইনারের কেন্দ্রভাগে উল্লম্বভাবে অবস্থান নেয়।

   .flex-container {
     display: flex;
     align-items: center; /* কেন্দ্রে অবস্থান */
   }
   

4. stretch (ডিফল্ট)
   Flex Items গুলি কন্টেইনারের উচ্চতা অনুযায়ী প্রসারিত হয়ে পুরো উচ্চতা দখল করে।

   .flex-container {
     display: flex;
     align-items: stretch; /* কন্টেইনারের উচ্চতা অনুসারে প্রসারিত হবে */
   }
   

5. baseline
   Flex Items গুলি তাদের টেক্সট বেসলাইনের সাথে সজ্জিত হয়। এটি সাধারণত টেক্সট এবং অন্যান্য উপাদানগুলোর সঠিক অবস্থান নিশ্চিত করতে ব্যবহার হয়।

   .flex-container {
     display: flex;
     align-items: baseline; /* বেসলাইন অনুযায়ী অবস্থান */
   }
   

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

align-self প্রপার্টি Flex Items-এর জন্য একটি নির্দিষ্ট উল্লম্ব অবস্থান নির্ধারণ করে। এটি align-items এর মতো কাজ করে, তবে এটি কেবল নির্দিষ্ট আইটেমের জন্য কাজ করে, পুরো কন্টেইনারের জন্য নয়।

উদাহরণ:

1. align-self: flex-start নির্দিষ্ট Flex Item কন্টেইনারের উপরের অংশে অবস্থান নেবে।

   .flex-item {
     align-self: flex-start; /* নির্দিষ্ট আইটেম উপরে থাকবে */
   }
   

2. align-self: flex-end নির্দিষ্ট Flex Item কন্টেইনারের নিচের অংশে অবস্থান নেবে।

   .flex-item {
     align-self: flex-end; /* নির্দিষ্ট আইটেম নিচে থাকবে */
   }
   

3. align-self: center নির্দিষ্ট Flex Item কন্টেইনারের উল্লম্বভাবে কেন্দ্রে অবস্থান নেবে।

   .flex-item {
     align-self: center; /* নির্দিষ্ট আইটেম কেন্দ্রে থাকবে */
   }
   

4. align-self: stretch নির্দিষ্ট Flex Item কন্টেইনারের উচ্চতা অনুসারে প্রসারিত হবে।

   .flex-item {
     align-self: stretch; /* নির্দিষ্ট আইটেম প্রসারিত হবে */
   }
   

উদাহরণ: Vertical Alignment

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;
  height: 200px; /* কন্টেইনারের উচ্চতা */
  border: 2px solid #ccc;
  background-color: lightgray;
}

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

.flex-container.align-start {
  align-items: flex-start; /* উপরের দিকে অবস্থান */
}

.flex-container.align-center {
  align-items: center; /* কেন্দ্রে অবস্থান */
}

.flex-container.align-end {
  align-items: flex-end; /* নিচে অবস্থান */
}

আউটপুট:

1. flex-start: সব আইটেম উপরে থাকবে।
2. center: সব আইটেম কন্টেইনারের কেন্দ্রভাগে থাকবে।
3. flex-end: সব আইটেম নিচে থাকবে।

সারাংশ

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