flex-wrap এর মাধ্যমে multi-line flexbox তৈরি

flex-wrap কী?

flex-wrap হলো Flexbox-এর একটি প্রপার্টি, যা Flex Items-কে একাধিক লাইনে ভাগ করতে সক্ষম করে। যখন Flex Items-এর মোট আকার এক লাইনে ধারণের জন্য উপযুক্ত না থাকে, তখন flex-wrap ব্যবহার করে এই আইটেমগুলোকে পরবর্তী লাইনে স্থানান্তরিত করা যায়। এর মাধ্যমে Flexbox কন্টেইনারে মাল্টি-লাইন লেআউট তৈরি করা সম্ভব হয়।

flex-wrap এর মানসমূহ

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

   • Flex Items সবসময় এক লাইনে থাকবে, এমনকি তাদের মোট আকার কন্টেইনারের থেকে বড় হলেও। এটি Flexbox-এর ডিফল্ট মান।

   .flex-container {
     display: flex;
     flex-wrap: nowrap;  /* এক লাইনে থাকবে */
   }
   

2. wrap:

   • Flex Items একাধিক লাইনে ভেঙে যাবে যখন তাদের মোট আকার কন্টেইনারের গণ্ডির বাইরে চলে যাবে। এটি মাল্টি-লাইন Flexbox তৈরি করে।

   .flex-container {
     display: flex;
     flex-wrap: wrap;  /* একাধিক লাইনে বিভক্ত হবে */
   }
   

3. wrap-reverse:

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

   .flex-container {
     display: flex;
     flex-wrap: wrap-reverse;  /* উপরের পরিবর্তে নিচ থেকে উপরে ভাঙবে */
   }
   

flex-wrap এর মাধ্যমে Multi-line Flexbox তৈরি

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

উদাহরণ 1: wrap ব্যবহার করে Multi-line Flexbox

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: 10px;  /* আইটেমগুলোর মধ্যে জায়গা */
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  flex: 1 1 150px;  /* আইটেমগুলোর আকার নির্ধারণ */
}

আউটপুট:

এখানে, যদি কন্টেইনারের প্রস্থ খুব ছোট হয়, তাহলে Flex Items এক লাইনে সঠিকভাবে ফিট না হয়ে পরবর্তী লাইনে চলে যাবে।

উদাহরণ 2: wrap-reverse ব্যবহার করে Multi-line Flexbox

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-reverse;  /* মাল্টি-লাইন কন্টেইনার উল্টো দিকে সাজবে */
  gap: 10px;
}

.flex-item {
  background-color: lightgreen;
  padding: 20px;
  text-align: center;
  flex: 1 1 150px;
}

আউটপুট:

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

flex-wrap এর ব্যবহার কেন প্রয়োজন?

1. রেস্পন্সিভ ডিজাইন:
   রেস্পন্সিভ ওয়েব ডিজাইনে Flex Items কন্টেইনারের আকার অনুযায়ী স্বয়ংক্রিয়ভাবে একাধিক লাইনে ভেঙে যেতে পারে। এটি ছোট স্ক্রীনে আইটেমগুলোকে এক লাইনে এবং বড় স্ক্রীনে মাল্টি-লাইন লেআউট তৈরি করার সুযোগ দেয়।
2. স্পেস ব্যবস্থাপনা:
   যখন কন্টেইনারে অনেক আইটেম থাকে, এবং একটি একক লাইনে তাদের জায়গা না হয়, তখন flex-wrap ব্যবহার করে তাদেরকে পরবর্তী লাইনে স্থানান্তরিত করা যায়, যা লেআউটকে আরো পরিষ্কার এবং ব্যবস্থাপনা সহজ করে।
3. নমনীয়তা:
   Flexbox মডেলটি আইটেমগুলোর আকার এবং স্থান নিজে থেকেই সামঞ্জস্য করে, আর flex-wrap ব্যবহার করে আইটেমগুলোকে একাধিক লাইনে ভাগ করা যায়, যা লেআউটের নমনীয়তা বাড়ায়।

সারাংশ

flex-wrap Flexbox-এ মাল্টি-লাইন লেআউট তৈরি করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি Flex Items-কে একাধিক লাইনে ভাগ করতে সাহায্য করে এবং রেস্পন্সিভ ডিজাইন তৈরির জন্য সহায়ক। wrap এবং wrap-reverse ব্যবহারের মাধ্যমে আপনি কন্টেইনারের অভ্যন্তরীণ আইটেমগুলোর বিন্যাসের উপর পূর্ণ নিয়ন্ত্রণ রাখতে পারেন।