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

align-content কী?

align-content হলো Flexbox-এর একটি প্রপার্টি যা Flex Container-এর মধ্যে থাকা মাল্টি-লাইন Flex Items-এর উল্লম্ব (vertical) বিন্যাস নিয়ন্ত্রণ করে। এটি মূলত কেবল তখনই কার্যকরী, যখন Flex Items একাধিক লাইনে বিভক্ত হয়, অর্থাৎ যখন flex-wrap: wrap; ব্যবহার করা হয় এবং অনেক আইটেম থাকে যা এক লাইনে ধরতে পারে না।

এটি Flex Items-এর মধ্যে উল্লম্বভাবে স্থান ব্যবস্থাপনা করতে সাহায্য করে, যেমন: উপরের বা নিচের দিকে পুশ করা, সমানভাবে সঞ্চালন করা, বা নির্দিষ্ট অবস্থানে রাখার জন্য।

align-content প্রপার্টির মানসমূহ

align-content প্রপার্টি ৬টি মূল মানে কাজ করে, যা Flex Items-এর ভরের সাথে উল্লম্ব বিন্যাস এবং স্থান নিয়ন্ত্রণ করে:

1. flex-start:

   • Flex Items গুলি কন্টেইনারের উপরের দিকে সমবেত হবে।

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

2. flex-end:

   • Flex Items গুলি কন্টেইনারের নিচের দিকে সমবেত হবে।

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

3. center:

   • Flex Items গুলি কন্টেইনারের কেন্দ্রবিন্দুতে সমবেত হবে।

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

4. space-between:

   • Flex Items গুলোর মধ্যে সমান ফাঁক রেখে বিন্যস্ত হবে, তবে প্রথম এবং শেষ আইটেমের মধ্যে কোনো ফাঁকা জায়গা থাকবে না।

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

5. space-around:

   • Flex Items গুলোর মধ্যে সমান ফাঁক থাকবে, তবে প্রথম এবং শেষ আইটেমের চারপাশেও ফাঁকা জায়গা থাকবে।

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

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

   • Flex Items গুলি কন্টেইনারের পূর্ণ উল্লম্ব স্থানটিকে দখল করবে।

   .flex-container {
     align-content: stretch;
   }
   

align-content এবং align-items এর মধ্যে পার্থক্য

• align-items: একক লাইনে থাকা Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ করে। এটি Flex Items-এর একক লাইনের জন্য প্রযোজ্য।
• align-content: মাল্টি-লাইনের Flex Items-এর উল্লম্ব বিন্যাস নিয়ন্ত্রণ করে। এটি শুধুমাত্র তখনই কার্যকরী যখন Flex Items একাধিক লাইনে বিভক্ত হয়।

উদাহরণ: align-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 class="flex-item">Item 4</div>
  <div class="flex-item">Item 5</div>
  <div class="flex-item">Item 6</div>
</div>

CSS:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* একাধিক লাইনে ফ্লেক্স আইটেমগুলো সাজানো হবে */
  justify-content: space-between;
  align-content: center; /* Flex Items-কে উল্লম্বভাবে কেন্দ্রে রাখবে */
  height: 300px; /* কন্টেইনারের উচ্চতা */
}

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

আউটপুট:

এখানে, Flex Items গুলি একাধিক লাইনে বিভক্ত হবে এবং align-content: center; প্রপার্টির কারণে কন্টেইনারের কেন্দ্রের কাছে উল্লম্বভাবে সজ্জিত হবে।

সারাংশ

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