Complex Layouts তৈরি করার জন্য Nested Flexbox ব্যবহার

Nested Flexbox কী?

Nested Flexbox হল Flexbox-এর একটি অত্যন্ত শক্তিশালী ফিচার, যেখানে একটি Flexbox কন্টেইনারের মধ্যে আরেকটি Flexbox কন্টেইনার রাখা হয়। এই পদ্ধতিতে বিভিন্ন স্তরের Flexbox কন্টেইনার ব্যবহার করে জটিল (complex) লেআউট তৈরি করা যায়। এটি মাল্টি-লেভেল বা ভেতরে ভেতরে সাজানো লেআউট তৈরিতে কার্যকরী, যেমন টেবিল লেআউট, ড্যাশবোর্ড বা ওয়েবপেজের বিভিন্ন সেকশনগুলোকে সঠিকভাবে সাজানো।

Nested Flexbox কেন প্রয়োজন?

• জটিল লেআউট: Nested Flexbox-এর মাধ্যমে একাধিক স্তরের (layers) Flexbox কন্টেইনার ব্যবহার করে জটিল লেআউট ডিজাইন করা যায়।
• বিভিন্ন রেস্পন্সিভ ডিজাইন: প্রতি স্তরে Flexbox প্রয়োগ করে প্রতিটি সেকশন বা উপাদানকে একসাথে স্বতন্ত্রভাবে নিয়ন্ত্রণ করা যায়।
• আইটেমের নমনীয় বিন্যাস: Nested Flexbox দিয়ে আইটেমগুলোর বিন্যাস এবং আকার সহজেই কাস্টমাইজ করা যায়।

Nested Flexbox কিভাবে কাজ করে?

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

Nested Flexbox উদাহরণ

HTML:

<div class="outer-container">
  <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>
  <div class="flex-container">
    <div class="flex-item">Item 4</div>
    <div class="flex-item">Item 5</div>
    <div class="flex-item">Item 6</div>
  </div>
</div>

CSS:

.outer-container {
  display: flex;
  flex-direction: column; /* বাইরের কন্টেইনারে আইটেমগুলোকে উল্লম্বভাবে সাজাবে */
  gap: 20px; /* আইটেমগুলোর মধ্যে কিছু জায়গা থাকবে */
  padding: 20px;
}

.flex-container {
  display: flex;
  justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান জায়গা থাকবে */
  gap: 10px;
}

.flex-item {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid #ccc;
  text-align: center;
  flex-grow: 1; /* আইটেমগুলো সমানভাবে জায়গা নেবে */
}

আউটপুট:

এখানে, দুটি Flexbox কন্টেইনার (inner Flex Containers) একে অপরের মধ্যে সাজানো হয়েছে। প্রথমে বাইরের Flex Container (.outer-container) একটি কলামে আইটেমগুলোকে সাজায়, আর ভেতরের Flex Containers (.flex-container) তাদের মধ্যে আইটেমগুলো অনুভূমিকভাবে সমানভাবে সাজায়।

Nested Flexbox ব্যবহার করে আরও জটিল লেআউট উদাহরণ

HTML:

<div class="outer-container">
  <div class="header">
    <div class="logo">Logo</div>
    <div class="nav">
      <div class="nav-item">Home</div>
      <div class="nav-item">About</div>
      <div class="nav-item">Services</div>
    </div>
  </div>
  <div class="content">
    <div class="left-sidebar">Sidebar</div>
    <div class="main-content">Main Content</div>
  </div>
  <div class="footer">
    <div class="footer-item">Contact</div>
    <div class="footer-item">Privacy Policy</div>
    <div class="footer-item">Terms of Service</div>
  </div>
</div>

CSS:

/* বাইরের কন্টেইনার */
.outer-container {
  display: flex;
  flex-direction: column; /* উল্লম্বভাবে সাজানো হবে */
  gap: 20px;
  padding: 20px;
}

/* হেডার */
.header {
  display: flex;
  justify-content: space-between; /* লোগো এবং নেভিগেশন আইটেমের মধ্যে জায়গা থাকবে */
  background-color: #f4f4f4;
  padding: 10px;
}

.nav {
  display: flex;
  gap: 15px;
}

.nav-item {
  background-color: lightgray;
  padding: 10px;
  text-align: center;
}

/* কন্টেন্ট */
.content {
  display: flex;
  gap: 20px;
}

.left-sidebar {
  width: 200px;
  background-color: lightblue;
  padding: 10px;
}

.main-content {
  flex-grow: 1; /* মেইন কন্টেন্ট সব জায়গা নেবে */
  background-color: #fff;
  padding: 20px;
}

/* ফুটার */
.footer {
  display: flex;
  justify-content: space-around; /* ফুটারের আইটেমগুলো সমানভাবে সাজানো */
  background-color: #333;
  color: white;
  padding: 15px;
}

.footer-item {
  background-color: teal;
  padding: 10px;
  text-align: center;
}

আউটপুট:

এখানে, পুরো পেজে একটি লেআউট তৈরি হয়েছে যেখানে:

• Header-এ একটি লোগো এবং একটি ন্যাভিগেশন বার রয়েছে।
• Content-এ দুটি সেকশন রয়েছে—একটি সাইডবার এবং একটি মেইন কন্টেন্ট সেকশন।
• Footer-এ তিনটি আইটেম সমানভাবে সজ্জিত হয়েছে।

এটি একটি Nested Flexbox ব্যবহারের উদাহরণ, যেখানে বাইরের Flexbox কন্টেইনার এবং ভেতরের কন্টেইনারগুলি একে অপরের মধ্যে বিভিন্ন স্তরে সাজানো হয়েছে।

Nested Flexbox এর সুবিধা:

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

সারাংশ

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