nowrap, 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 লেআউটকে আরও নমনীয় এবং নিয়ন্ত্রণযোগ্য করে তোলে, বিশেষ করে রেস্পন্সিভ ডিজাইন এবং কমপ্লেক্স লেআউট তৈরির সময়।