মাল্টি-লাইন আইটেমের মধ্যে গ্যাপ এবং অ্যালাইনমেন্ট নিয়ন্ত্রণ

Flexbox ব্যবহার করে একাধিক লাইনে (multi-line) আইটেমগুলোকে সজ্জিত এবং তাদের মধ্যে গ্যাপ এবং অ্যালাইনমেন্ট নিয়ন্ত্রণ করা যায়। যখন Flex Items কন্টেইনারের মধ্যে এক লাইনে থাকতে পারে না, তখন তারা একাধিক লাইনে বিভক্ত হয়ে যায়। এই পরিস্থিতিতে, Flexbox আপনাকে আইটেমগুলোর মধ্যে ফাঁকা স্থান (gap) এবং তাদের সঠিকভাবে অ্যালাইন করার সুযোগ দেয়।

মাল্টি-লাইন আইটেমের মধ্যে গ্যাপ নিয়ন্ত্রণ

ফ্লেক্স কন্টেইনারে flex-wrap প্রপার্টি ব্যবহার করে একাধিক লাইনে আইটেমগুলিকে সাজানো যায়। এছাড়া, gap প্রপার্টি ব্যবহার করে আইটেমগুলোর মধ্যে ফাঁকা জায়গা নিয়ন্ত্রণ করা হয়।

flex-wrap প্রপার্টি:

• nowrap: ডিফল্ট মান, ফ্লেক্স আইটেমগুলো এক লাইনে থাকবে।
• wrap: ফ্লেক্স আইটেমগুলো একাধিক লাইনে সাজানো হবে।
• wrap-reverse: আইটেমগুলো উল্টানো অক্ষে (reverse direction) একাধিক লাইনে সাজানো হবে।

gap প্রপার্টি:

• gap: ফ্লেক্স আইটেমগুলোর মধ্যে গ্যাপ বা ফাঁকা স্থান নির্ধারণ করে। এটি আইটেমগুলোর মধ্যে অনুভূমিক এবং উল্লম্ব উভয় দিকেই ব্যবহৃত হয়।

মাল্টি-লাইন আইটেম এবং গ্যাপ নিয়ন্ত্রণের উদাহরণ

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; /* আইটেমগুলো একাধিক লাইনে সাজানো হবে */
  gap: 20px; /* আইটেমগুলোর মধ্যে 20px ফাঁকা জায়গা থাকবে */
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  margin: 5px;
  text-align: center;
  flex: 1 1 200px; /* আইটেমগুলোকে সমান আকারে দেখাবে, 200px মিনিমাম সাইজ */
}

কী হবে:

• Flex Container-এ flex-wrap: wrap; ব্যবহৃত হওয়ার কারণে আইটেমগুলো একাধিক লাইনে সজ্জিত হবে।
• gap: 20px; ব্যবহৃত হওয়ায় আইটেমগুলোর মধ্যে ২০ পিক্সেল ফাঁকা জায়গা থাকবে।

মাল্টি-লাইন আইটেমের অ্যালাইনমেন্ট নিয়ন্ত্রণ

Flexbox দিয়ে মাল্টি-লাইন আইটেমগুলোর উল্লম্ব এবং অনুভূমিক অ্যালাইনমেন্ট নিয়ন্ত্রণ করা যায়। align-content এবং align-items প্রপার্টি ব্যবহার করে আইটেমগুলোর অবস্থান ঠিক করা হয়।

align-content প্রপার্টি:

• align-content মাল্টি-লাইনে সাজানো আইটেমগুলোর উল্লম্ব অ্যালাইনমেন্ট নিয়ন্ত্রণ করে। এটি কেবল তখনই কার্যকর, যখন Flex Container-এ একাধিক লাইন থাকে।
  • flex-start: উপরের দিকে।
  • flex-end: নিচের দিকে।
  • center: কেন্দ্রে।
  • space-between: লাইনগুলোর মধ্যে সমান দূরত্ব থাকবে।
  • space-around: লাইনের চারপাশে সমান প্যাডিং থাকবে।
  • stretch: আইটেমগুলো কন্টেইনারের উল্লম্ব আকারে প্রসারিত হবে।

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

• 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 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; /* আইটেমগুলো একাধিক লাইনে সাজানো হবে */
  gap: 15px; /* আইটেমগুলোর মধ্যে গ্যাপ */
  align-content: space-between; /* একাধিক লাইনের মধ্যে সমান দূরত্ব */
}

.flex-item {
  background-color: lightgreen;
  padding: 20px;
  flex: 1 1 200px; /* আইটেমগুলো সমানভাবে থাকবে */
  text-align: center;
}

কী হবে:

• Flex Items একাধিক লাইনে সাজানো হবে এবং gap প্রপার্টির মাধ্যমে আইটেমগুলোর মধ্যে ১৫px ফাঁকা জায়গা থাকবে।
• align-content: space-between; ব্যবহার করা হলে একাধিক লাইনের মধ্যে সমান দূরত্ব থাকবে।

মাল্টি-লাইন আইটেমের জন্য গুরুত্বপূর্ণ Flexbox প্রপার্টি

সারাংশ

ফ্লেক্সবক্সের flex-wrap প্রপার্টি ব্যবহার করে একাধিক লাইনে আইটেমগুলো সাজানো যায়। gap প্রপার্টির সাহায্যে আইটেমগুলোর মধ্যে ফাঁকা স্থান নিয়ন্ত্রণ করা হয় এবং align-items ও align-content প্রপার্টির মাধ্যমে মাল্টি-লাইন আইটেমগুলোর উল্লম্ব অ্যালাইনমেন্ট নিয়ন্ত্রণ করা সম্ভব। এই সব প্রপার্টি একত্রে ব্যবহার করে ফ্লেক্স কন্টেইনারে আইটেমগুলোর মধ্যে সুন্দরভাবে গ্যাপ এবং অ্যালাইনমেন্ট নির্ধারণ করা যায়।