Flex Wrap (আইটেম কিভাবে লাইনে ভাঙবে)

Flex Wrap কী?

flex-wrap হলো Flexbox-এর একটি প্রপার্টি যা Flex Items-এর লেআউট পরিচালনা করে যখন উপাদানগুলো একটি একক লাইন বা সারিতে ফিট না হয়। এর মাধ্যমে আপনি নির্দেশ দিতে পারেন যে, Flex Items গুলো একাধিক লাইনে ভাঙবে কিনা।

যখন Flex Items-এর মোট আকার (width এবং height) Flex Container-এর পরিসরের চেয়ে বড় হয়, তখন flex-wrap প্রপার্টি Flex Items-এর জন্য আরও স্থান তৈরি করতে সাহায্য করে, যাতে তারা সঠিকভাবে উপযুক্ত লাইনে ভাঙে।

Flex Wrap-এর মানসমূহ

flex-wrap প্রপার্টি তিনটি মূল মান নেয়:

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

   • Flex Items কোনো অবস্থাতেই একাধিক লাইনে ভাঙবে না। তারা একটাই লাইনে থাকবে এবং কন্টেইনারের বাইরের দিকে চলে যেতে পারে যদি তাদের আকার কন্টেইনারের থেকে বড় হয়।
   • ব্যবহার: যখন Flex Items এক লাইনে থাকতে হবে এবং স্থান সংকুলান না হলে কন্টেইনারে স্ক্রল তৈরি করতে হবে।

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

2. wrap:

   • Flex Items একাধিক লাইনে ভাঙবে, প্রথমে একটি লাইনে যাবে এবং যদি আরো জায়গা প্রয়োজন হয়, তাহলে পরবর্তী লাইনে চলে যাবে।
   • ব্যবহার: সাধারণত রেস্পন্সিভ ডিজাইন বা মোবাইল ফ্রেন্ডলি লেআউট ডিজাইন করতে ব্যবহৃত হয়।

   .flex-container {
     display: flex;
     flex-wrap: wrap; /* আইটেম একাধিক লাইনে ভাঙবে */
   }
   

3. wrap-reverse:

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

   .flex-container {
     display: flex;
     flex-wrap: wrap-reverse; /* আইটেম একাধিক লাইনে বিপরীত ক্রমে ভাঙবে */
   }
   

Flex Wrap-এর প্রয়োজনীয়তা কেন?

1. রেস্পন্সিভ ডিজাইন:

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

2. স্ট্যাটিক সাইজের কন্টেইনার:

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

3. পরিসরের সঠিক ব্যবহার:

flex-wrap ব্যবহার করে আপনি Flex Items-এর জন্য পর্যাপ্ত স্থান ব্যবহার নিশ্চিত করতে পারেন, যেগুলো কন্টেইনারের সীমানার মধ্যে সঠিকভাবে বিন্যস্ত হবে।

Flex Wrap ব্যবহার করে একটি উদাহরণ

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 Wrap ব্যবহার করা):

.flex-container {
  display: flex;
  flex-wrap: wrap; /* আইটেম একাধিক লাইনে ভাঙবে */
  gap: 10px; /* আইটেমগুলোর মধ্যে স্থান */
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
  flex: 1 1 200px; /* আইটেমগুলো 200px প্রশস্ত হবে এবং প্রয়োজনে সঙ্কুচিত হতে পারবে */
}

আউটপুট:

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

Flex Wrap-এর সাথে justify-content এবং align-items প্রপার্টি

flex-wrap যখন wrap বা wrap-reverse এর মতো ব্যবহৃত হয়, তখন আপনি justify-content এবং align-items ব্যবহার করে Flex Items-এর মধ্যে আরও স্থানের ব্যবস্থাপনা করতে পারেন:

• justify-content: আইটেমগুলোর মধ্যে অনুভূমিক স্থান ব্যবস্থাপনা।
• align-items: আইটেমগুলোর মধ্যে উল্লম্ব স্থান ব্যবস্থাপনা।

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* আইটেমগুলোর মধ্যে অনুভূমিকভাবে সমান জায়গা */
  align-items: center; /* আইটেমগুলোর মধ্যে উল্লম্বভাবে কেন্দ্রীভূত */
  gap: 10px;
}

সারাংশ

flex-wrap প্রপার্টি Flexbox লেআউটের একটি গুরুত্বপূর্ণ অংশ, যা Flex Items-এর জন্য একাধিক লাইনে ভাঙার বা না ভাঙার আচরণ নির্ধারণ করে। এটি Flex Items-এর আকার এবং বিন্যাসে নমনীয়তা এনে দেয়, বিশেষত রেস্পন্সিভ ডিজাইন বা স্ক্রীন সাইজের ভিত্তিতে উপযুক্ত স্থান সামঞ্জস্য করতে। flex-wrap ব্যবহার করলে আপনি Flex Items-এর অবস্থান ও বিন্যাস সঠিকভাবে নিয়ন্ত্রণ করতে পারবেন।

Flexbox এর ডিফল্ট single-line behavior হলো Flex Container-এর ভেতরে থাকা Flex Itemsগুলো একক লাইন (single line) বা সারিতে সাজানো। এটি Flexbox-এর প্রথম এবং প্রধান আচরণ, যেখানে সমস্ত Flex Items একত্রে একটি সারিতে বা লাইনে রাখা হয়, যতক্ষণ না তাদের আকার বা কন্টেইনারের সাইজ তাদের একাধিক লাইনে সরানোর প্রয়োজন না হয়।

ডিফল্ট Single-Line Behavior কীভাবে কাজ করে?

• যখন আপনি display: flex; ব্যবহার করেন, তখন Flex Items ডিফল্টভাবে flex-direction: row; (অর্থাৎ অনুভূমিকভাবে) সজ্জিত হয় এবং কন্টেইনারের মধ্যে একটি একক লাইন তৈরি হয়।
• Flex Items এর মোট প্রস্থ (width) একত্রে কন্টেইনারের প্রস্থের সমান বা তার কম হওয়া পর্যন্ত তারা একক লাইনে অবস্থান করবে।
• যদি Flex Items এর মোট প্রস্থ কন্টেইনারের প্রস্থের চেয়ে বড় হয়ে যায়, তবে তারা স্বয়ংক্রিয়ভাবে সঠিকভাবে একাধিক লাইনে ভাগ হয়ে যাবে, যদি flex-wrap: wrap; প্রপার্টি ব্যবহার করা না হয়।

ডিফল্ট Single-Line Behavior এর উদাহরণ

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; /* Flexbox সক্রিয় */
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  margin: 5px;
  text-align: center;
}

আউটপুট:

এই কোডের মাধ্যমে Flex Items গুলো অনুভূমিকভাবে একক লাইনে সজ্জিত হবে, কারণ display: flex; এবং flex-direction: row; (ডিফল্ট) রয়েছে, এবং কন্টেইনারের প্রস্থ Flex Items গুলোর জন্য যথেষ্ট থাকবে।

Flex-wrap এবং Single-Line Behavior

Flexbox-এর ডিফল্ট behavior হলো একটি single-line layout, তবে যদি flex-wrap প্রপার্টি ব্যবহৃত হয়, তবে Flex Items একাধিক লাইনে ভাগ হয়ে যাবে।

• flex-wrap: wrap;: এটি Flex Items গুলোর জন্য একাধিক লাইন তৈরি করতে সাহায্য করে, যদি তারা কন্টেইনারের মধ্যে একসাথে না স্যাঁটিয়ে থাকে।
• flex-wrap: nowrap;: এটি Flex Items গুলোকে একই লাইনে রাখে, যেটি Flexbox-এর ডিফল্ট আচরণ।

Flex-wrap এর ব্যবহার:

.flex-container {
  display: flex;
  flex-wrap: wrap; /* Flex Items গুলো একাধিক লাইনে যাবে, যদি প্রয়োজন হয় */
}

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

সারাংশ

Flexbox এর ডিফল্ট single-line behavior হলো Flex Items গুলোকে একক লাইনে (single line) সজ্জিত করা, যতক্ষণ না তাদের আকার কন্টেইনারের সাইজের সাথে খাপ খাচ্ছে। Flexbox এই behavior এর মাধ্যমে ওয়েব ডিজাইনে উপাদানগুলোর প্রাকৃতিক বিন্যাস নিশ্চিত করে, এবং পর্দার আকার অনুযায়ী এই layoutটি খুবই নমনীয়।

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 ব্যবহারের মাধ্যমে আপনি কন্টেইনারের অভ্যন্তরীণ আইটেমগুলোর বিন্যাসের উপর পূর্ণ নিয়ন্ত্রণ রাখতে পারেন।

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

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

1. nowrap (ডিফল্ট মান)
2. wrap
3. wrap-reverse

এই প্রপার্টি Flex Container-এ ব্যবহৃত হয়, এবং এটি Flex Items-এর জন্য কিভাবে স্থান ব্যবস্থাপনা হবে তা নিয়ন্ত্রণ করে।

1. nowrap (ডিফল্ট)

• বিবরণ:
  nowrap হল flex-wrap এর ডিফল্ট মান। এটি Flex Items-কে এক লাইনে রাখে। যদি পর্যাপ্ত জায়গা না থাকে, তবে উপাদানগুলো একটি সারিতে চাপা পড়ে এবং সরাসরি সংকুচিত হয়। এটি Flex Items-কে এক লাইনে সাজানোর নির্দেশ দেয়, এবং তারা যদি একে অপরকে সম্পূর্ণভাবে ভরিয়ে দেয়, তবে অতিরিক্ত জায়গার জন্য স্ক্রোলিং হতে পারে।
• ব্যবহার:
  যখন আপনি Flex Items-এর মধ্যে স্থান সংকুলান করতে চান না এবং সব উপাদানকে এক লাইনে রাখতে চান।

.flex-container {
  display: flex;
  flex-wrap: nowrap;  /* এক লাইনে সব উপাদান রাখবে */
}

উদাহরণ:

<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>

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: lightgray;
}

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

আউটপুট:
Flex Items এক লাইনে থাকবে, এবং যদি জায়গা কম পড়ে, তবে উপাদানগুলো সংকুচিত হবে।

2. wrap

• বিবরণ:
  wrap Flex Items-কে একাধিক লাইনে ভেঙে দেয় যদি তাদের জন্য পর্যাপ্ত জায়গা না থাকে। এটি আইটেমগুলোকে পরবর্তী লাইনে স্থান দেয়, যাতে তারা উপযুক্ত জায়গায় অবস্থান করতে পারে। এই মানটি রেস্পন্সিভ লেআউট ডিজাইনে খুবই গুরুত্বপূর্ণ, যেখানে উপাদানগুলোর বিন্যাসের জন্য স্ক্রীনের আকার অনুসারে স্থান পরিবর্তন করা প্রয়োজন।
• ব্যবহার:
  যখন আপনি Flex Items-কে একাধিক লাইনে বিভক্ত করতে চান এবং তাদেরকে সঠিকভাবে বিন্যস্ত রাখতে চান।

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

উদাহরণ:

<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>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: lightgray;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
  flex: 1 0 30%; /* প্রতিটি আইটেমের প্রাথমিক আকার 30% */
}

আউটপুট:
যতটুকু জায়গা প্রয়োজন, Flex Items পরবর্তী লাইনে চলে যাবে এবং পর্যাপ্ত জায়গা থাকা সত্ত্বেও এক লাইনে থাকবে না।

3. wrap-reverse

• বিবরণ:
  wrap-reverse Flex Items-কে একাধিক লাইনে ভেঙে দেয়, তবে এটি wrap এর বিপরীত আচরণে কাজ করে। অর্থাৎ, উপাদানগুলো পরবর্তী লাইনে যাওয়ার পরিবর্তে উল্টানো দিক থেকে (নিচ থেকে উপরে বা ডান থেকে বাম) সাজানো হয়। এটি খুবই উপকারী যখন আপনি এমন ধরনের বিন্যাস চান, যেখানে উপাদানগুলোর অর্ডার উল্টো হতে পারে।
• ব্যবহার:
  যখন আপনি Flex Items-এর লাইনের ক্রম উল্টাতে চান এবং উপাদানগুলোর উল্টানো দিক থেকে সাজাতে চান।

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;  /* উল্টানো দিক থেকে লাইনে উপাদানগুলো সাজানো হবে */
}

উদাহরণ:

<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>

.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
  background-color: lightgray;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
  flex: 1 0 30%; /* প্রতিটি আইটেমের প্রাথমিক আকার 30% */
}

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

flex-wrap এর পার্থক্য:

সারাংশ

• nowrap: Flex Items এক লাইনে রাখা হবে, যদি জায়গা কম পড়ে, তাহলে উপাদানগুলো সংকুচিত হবে।
• wrap: Flex Items একাধিক লাইনে যাবে, যা রেস্পন্সিভ ডিজাইনের জন্য খুবই উপকারী।
• wrap-reverse: wrap এর বিপরীত, যেখানে উপাদানগুলোর লাইনের ক্রম উল্টানো দিক থেকে সাজানো হয়।

এই প্রপার্টি গুলো Flexbox লেআউটকে আরও নমনীয় এবং নিয়ন্ত্রণযোগ্য করে তোলে, বিশেষ করে রেস্পন্সিভ ডিজাইন এবং কমপ্লেক্স লেআউট তৈরির সময়।

Flex Wrap কী?

flex-wrap হলো Flexbox-এর একটি প্রপার্টি যা ফ্লেক্স কনটেইনারে থাকা ফ্লেক্স আইটেমগুলোকে এক লাইনে না ধরে একাধিক লাইনে বিভক্ত হতে সহায়তা করে। এটি মূলত তখন ব্যবহার হয় যখন ফ্লেক্স আইটেমগুলো কনটেইনারের ভেতর এক লাইনে জায়গা না পায় এবং আপনাকে তাদেরকে নতুন লাইনে সরাতে হয়।

ডিফল্টভাবে Flexbox এক লাইনে সমস্ত ফ্লেক্স আইটেমকে রাখে, তবে flex-wrap ব্যবহার করে আপনি তাদেরকে একাধিক লাইনে সরাতে পারেন, যা রেস্পন্সিভ ডিজাইনে খুবই কার্যকরী।

Flex Wrap-এর মান

flex-wrap প্রপার্টির তিনটি মান রয়েছে:

1. nowrap (ডিফল্ট মান):
   এটি Flex Items-কে এক লাইনে রাখে, এবং যদি জায়গা না থাকে তবে আইটেমগুলো কনটেইনারের বাইরে চলে যেতে পারে।

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

2. wrap:
   এটি Flex Items-কে একাধিক লাইনে ভেঙে দেয়। আইটেমগুলো প্রথম লাইনে যতটুকু জায়গা নিতে পারে, পরে পরবর্তী লাইনে চলে যাবে।

   .flex-container {
     display: flex;
     flex-wrap: wrap;  /* একাধিক লাইনে আইটেমগুলো সজ্জিত হবে */
   }
   

3. wrap-reverse:
   এটি wrap এর মতো কাজ করে, তবে আইটেমগুলোর লাইনের ক্রম উল্টে দেয়। অর্থাৎ প্রথমে যেগুলো নিচে থাকতো, এখন তা উপরে চলে যাবে।

   .flex-container {
     display: flex;
     flex-wrap: wrap-reverse;  /* উল্টানো লাইনে সজ্জিত হবে */
   }
   

Responsive Layouts এর জন্য Flex Wrap

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

উদাহরণ: রেস্পন্সিভ লেআউট

<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 Wrap এর সাথে রেস্পন্সিভ ডিজাইন)

.flex-container {
  display: flex;
  flex-wrap: wrap;  /* আইটেমগুলোকে একাধিক লাইনে সজ্জিত করবে */
  gap: 10px; /* আইটেমগুলোর মধ্যে ফাঁকা জায়গা */
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  width: 30%;  /* প্রাথমিকভাবে প্রতিটি আইটেমের প্রস্থ 30% */
}

/* মোবাইল স্ক্রীনে এক লাইনে ১টি আইটেম */
@media (max-width: 600px) {
  .flex-item {
    width: 100%;  /* মোবাইল স্ক্রীনে একেকটি আইটেম পুরো প্রস্থ নিবে */
  }
}

/* বড় স্ক্রীনে এক লাইনে ৪টি আইটেম */
@media (min-width: 1200px) {
  .flex-item {
    width: 23%;  /* বড় স্ক্রীনে আইটেমগুলোকে ৪টি করে এক লাইনে সাজানো */
  }
}

ব্যাখ্যা:

• ডিফল্ট লেআউট: Flex Items গুলো ৩০% প্রস্থে একাধিক লাইনে ভেঙে যাবে (যখন প্রয়োজন হবে)।
• মোবাইল ভিউ: যখন স্ক্রীন ৬০০px বা তার কম হয়, তখন প্রতিটি Flex Item পুরো প্রস্থ নিবে এবং এক লাইনে সজ্জিত হবে।
• ডেস্কটপ ভিউ: যখন স্ক্রীন ১২৮০px বা তার বেশি হয়, তখন এক লাইনে ৪টি Flex Item থাকবে।

ফ্লেক্স র‍্যাপের সুবিধা

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

সারাংশ

flex-wrap হলো Flexbox-এর একটি গুরুত্বপূর্ণ প্রপার্টি যা উপাদানগুলোকে একাধিক লাইনে সাজানোর সুবিধা দেয়। এটি রেস্পন্সিভ ওয়েব ডিজাইনে অত্যন্ত গুরুত্বপূর্ণ, কারণ এটি স্ক্রীনের আকার অনুযায়ী উপাদানগুলোর বিন্যাস এবং স্থান সামঞ্জস্য করতে সাহায্য করে। flex-wrap ব্যবহার করে ওয়েবপেজের উপাদানগুলোকে সুন্দরভাবে এবং কার্যকরভাবে সজ্জিত করা যায়।