Flex Wrap এবং Flex Basis ব্যবহার করে Responsive Layouts

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

Flex Wrap এবং Flex Basis কী?

Flex Wrap:

flex-wrap প্রপার্টি ব্যবহৃত হয় যখন Flex Items এক লাইনে ফিট না হয়। এটি Flex Items-কে একাধিক লাইনে ভেঙে দেওয়ার অনুমতি দেয়।

• nowrap (ডিফল্ট): এক লাইনে থাকবে।
• wrap: একাধিক লাইনে ভাঙবে।
• wrap-reverse: একাধিক লাইনে ভাঙবে, তবে বিপরীত ক্রমে সাজানো হবে।

Flex Basis:

flex-basis প্রপার্টি Flex Item-এর প্রাথমিক আকার নির্ধারণ করে। এটি আইটেমের প্রাথমিক আকারে একটি নির্দিষ্ট মূল্য দেয়, যা পরবর্তীতে flex-grow এবং flex-shrink দ্বারা নিয়ন্ত্রিত হতে পারে।

• flex-basis: 200px;: আইটেমের প্রাথমিক আকার ২০০px হবে।
• flex-basis: auto;: আইটেমের আকার তার কন্টেন্টের আকারের উপর নির্ভর করবে।

Responsive Layout তৈরি করতে Flex Wrap এবং Flex Basis ব্যবহার করা

Responsive Layout তৈরি করতে, Flexbox-এ flex-wrap এবং flex-basis ব্যবহার করলে উপাদানগুলো বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে বিন্যস্ত হয়। সাধারণত, মোবাইল প্রথম (mobile-first) ডিজাইন পদ্ধতিতে এই দুটি প্রপার্টি ব্যবহার করা হয়, যেখানে ছোট স্ক্রীনে Flex Itemsগুলো এক কলামে থাকবে এবং বড় স্ক্রীনে এগুলো একাধিক কলামে বিভক্ত হবে।

উদাহরণ: Flex Wrap এবং Flex Basis ব্যবহার করে Responsive Layout

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

.flex-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
  flex-basis: 30%; /* প্রাথমিক আকার ৩০% */
  box-sizing: border-box;
}

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

/* ট্যাবলেট স্ক্রীনে ২ কলাম */
@media (min-width: 601px) and (max-width: 900px) {
  .flex-item {
    flex-basis: 48%; /* প্রতিটি আইটেম ৪৮% প্রশস্ত হবে */
  }
}

/* বড় স্ক্রীনে ৩ কলাম */
@media (min-width: 901px) {
  .flex-item {
    flex-basis: 30%; /* প্রতিটি আইটেম ৩০% প্রশস্ত হবে */
  }
}

ব্যাখ্যা:

1. Flex Wrap:
   • flex-wrap: wrap; প্রপার্টি ব্যবহার করা হয়েছে, যার ফলে যদি Flex Items এক লাইনে সাইজ না ফিট হয়, তবে তারা পরবর্তী লাইনে চলে যাবে।
2. Flex Basis:
   • flex-basis: 30%; প্রপার্টি দিয়ে আইটেমগুলোর প্রাথমিক আকার ৩০% নির্ধারণ করা হয়েছে, যার ফলে বড় স্ক্রীনে ৩টি আইটেম একটি লাইনে জায়গা পাবে।
   • মোবাইল স্ক্রীনে, flex-basis: 100%; ব্যবহার করা হয়েছে, যা প্রতিটি আইটেমকে পুরো এক কলাম দেবে।
   • ট্যাবলেট স্ক্রীনে, flex-basis: 48%; ব্যবহার করে ২টি আইটেম প্রতি লাইনে প্রদর্শিত হবে।
3. Responsive Design:
   • মোবাইল স্ক্রীনে প্রতিটি আইটেম ১০০% প্রশস্ত হবে, অর্থাৎ একটি একক কলামে প্রদর্শিত হবে।
   • ট্যাবলেট স্ক্রীনে আইটেমগুলো ৪৮% প্রশস্ত হয়ে ২ কলামে প্রদর্শিত হবে।
   • বড় স্ক্রীনে আইটেমগুলো ৩০% প্রশস্ত হবে এবং ৩ কলামে সাজানো হবে।

Flex Wrap এবং Flex Basis ব্যবহারের সুবিধা

1. নমনীয় লেআউট (Flexible Layout): flex-wrap এবং flex-basis ব্যবহারে আপনি সহজেই উপাদানগুলোর স্থান এবং বিন্যাস নিয়ন্ত্রণ করতে পারবেন। এটি রেস্পন্সিভ ডিজাইন তৈরিতে সাহায্য করে এবং ছোট থেকে বড় স্ক্রীনে উপাদানগুলোকে অটোমেটিক্যালি সামঞ্জস্যিত করে।
2. অটোমেটিক আকারের সামঞ্জস্য (Automatic Adjustment of Size): Flex Items-এর প্রাথমিক আকার (flex-basis) দিয়ে তাদের আকার নিয়ন্ত্রণ করা হয়, এবং flex-grow ব্যবহার করে এগুলো প্রয়োজনমতো প্রসারিত হতে পারে। এভাবে, ছোট স্ক্রীনে উপাদানগুলো এক কলামে থাকে এবং বড় স্ক্রীনে একাধিক কলামে চলে যায়।
3. সহজ কন্টেইনার ব্যবস্থাপনা: Flexbox-এ flex-wrap ব্যবহার করার মাধ্যমে Flex Items একাধিক লাইনে সজ্জিত হয়ে যায়, যা বিভিন্ন ধরনের স্ক্রীন এবং ডিভাইসের জন্য উপযুক্ত লেআউট তৈরি করতে সাহায্য করে।

সারাংশ

flex-wrap এবং flex-basis ব্যবহার করে Flexbox-এ Responsive Layouts তৈরি করা খুবই সহজ। flex-wrap একাধিক লাইনে আইটেমগুলো ভাঙার সুযোগ দেয় এবং flex-basis প্রপার্টি Flex Items-এর প্রাথমিক আকার নির্ধারণ করে। এই দুটি প্রপার্টি একত্রে ব্যবহার করে আপনি সহজেই রেস্পন্সিভ ওয়েব ডিজাইন তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীন সাইজ অনুযায়ী আইটেমগুলোর বিন্যাস পরিবর্তন করে।