Nested Flex Containers তৈরি করা

Flexbox ব্যবহারে আপনি একটি Flex Container-এর ভিতরে আরেকটি Flex Container (nested flex containers) তৈরি করতে পারেন। Nested Flex Containers ব্যবহারের মাধ্যমে আপনি আরও জটিল এবং কার্যকরী লেআউট ডিজাইন করতে পারবেন। এটি মূলত একাধিক লেভেলে ফ্লেক্স আইটেমগুলোকে সঠিকভাবে বিন্যস্ত এবং সাজানোর জন্য ব্যবহৃত হয়।

Nested Flex Containers-এর মৌলিক গঠন

Nested Flex Containers তৈরি করার জন্য, প্রথমে একটি Flex Container তৈরি করবেন এবং তার ভেতরে আরেকটি Flex Container রাখবেন। প্রতিটি Flex Container এবং তার আইটেমগুলো স্বতন্ত্রভাবে flex-direction, justify-content, এবং align-items নিয়ন্ত্রণ করবে, যার ফলে আপনি সহজেই প্রতিটি লেভেলের লেআউট নিয়ন্ত্রণ করতে পারবেন।

উদাহরণ:

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">
    <div class="nested-flex-container">
      <div class="nested-item">Nested Item 1</div>
      <div class="nested-item">Nested Item 2</div>
      <div class="nested-item">Nested Item 3</div>
    </div>
  </div>
  <div class="flex-item">Item 2</div>
</div>

CSS:

/* মূল Flex Container */
.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: lightblue;
  padding: 10px;
}

/* মূল Flex Items */
.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
  flex: 1;
  margin: 5px;
}

/* Nested Flex Container */
.nested-flex-container {
  display: flex;
  flex-direction: column; /* Nested Container-এর আইটেমগুলো উল্লম্বভাবে সাজাবে */
  justify-content: space-between;
  align-items: center;
  background-color: lightgray;
  padding: 10px;
  height: 120px;
}

/* Nested Flex Items */
.nested-item {
  background-color: darkcyan;
  color: white;
  padding: 10px;
  text-align: center;
  margin: 5px;
}

ব্যাখ্যা:

1. প্রথম Flex Container:
   • এটি display: flex; ব্যবহার করে Flexbox লেআউট সক্রিয় করা হয়েছে।
   • justify-content: space-around; ব্যবহার করে Flex Items-এর মধ্যে সমান স্থান দেয়া হয়েছে।
   • align-items: center; দিয়ে উপাদানগুলো উল্লম্বভাবে কেন্দ্রীভূত করা হয়েছে।
2. Nested Flex Container:
   • .nested-flex-container একটি নতুন Flex Container, যা তার প্যারেন্ট (মুল Flex Item) এর ভেতরে অবস্থিত।
   • এখানে flex-direction: column; ব্যবহার করে Nested Flex Items গুলোকে উল্লম্বভাবে (vertical) সাজানো হয়েছে।
   • justify-content: space-between; দিয়ে Nested Items-এর মধ্যে সমান দূরত্ব তৈরি করা হয়েছে।
3. Nested Flex Items:
   • .nested-item গুলোর মধ্যে মুলত ছোট Flex Items রাখা হয়েছে যা উল্লম্বভাবে সাজানো হয়েছে।

আউটপুট বিশ্লেষণ:

• প্রথম Flex Container-এর মধ্যে দুইটি বড় Flex Items রয়েছে (Item 1 এবং Item 2)।
• দ্বিতীয় Flex Item (Item 2) এর মধ্যে একটি Nested Flex Container রয়েছে।
• Nested Flex Container-এ তিনটি Nested Flex Items রয়েছে যেগুলো উল্লম্বভাবে সাজানো হয়েছে।

এভাবে, Nested Flex Containers ব্যবহার করে আপনি সহজেই জটিল লেআউট তৈরি করতে পারেন যেখানে বিভিন্ন লেভেলে বিভিন্ন ধরনের বিন্যাস এবং অ্যালাইনমেন্ট নিয়ন্ত্রণ করা সম্ভব।

আরও উন্নত উদাহরণ (Responsive Nested Flex Containers)

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">
    <div class="nested-flex-container">
      <div class="nested-item">Nested Item 1</div>
      <div class="nested-item">Nested Item 2</div>
      <div class="nested-item">Nested Item 3</div>
    </div>
  </div>
  <div class="flex-item">Item 2</div>
</div>

CSS:

/* মূল Flex Container */
.flex-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background-color: lightblue;
  padding: 10px;
  flex-wrap: wrap; /* মাল্টি-লাইন লেআউট */
}

/* মূল Flex Items */
.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  text-align: center;
  flex: 1;
  margin: 5px;
}

/* Nested Flex Container */
.nested-flex-container {
  display: flex;
  flex-direction: row; /* Nested Flex Container-এর আইটেমগুলো অনুভূমিকভাবে সাজাবে */
  justify-content: space-between;
  align-items: center;
  background-color: lightgray;
  padding: 10px;
  height: 120px;
}

/* Nested Flex Items */
.nested-item {
  background-color: darkcyan;
  color: white;
  padding: 10px;
  text-align: center;
  margin: 5px;
}

/* Responsive Design */
@media (max-width: 600px) {
  .flex-container {
    flex-direction: column; /* মোবাইল স্ক্রীনে উপাদানগুলো উল্লম্বভাবে সাজানো হবে */
  }

  .nested-flex-container {
    flex-direction: column; /* Nested Container-এও আইটেমগুলো উল্লম্বভাবে সাজানো হবে */
  }
}

সারাংশ

• Nested Flex Containers ফ্লেক্স আইটেমের মধ্যে আরেকটি Flex Container তৈরি করার প্রক্রিয়া। এটি Flexbox-এর শক্তিশালী বৈশিষ্ট্য, যা জটিল লেআউট তৈরি করতে সাহায্য করে।
• Responsive Design ব্যবহারের মাধ্যমে Nested Flex Containers এর মধ্যে লেআউট পরিবর্তন করা যায়, যেমন বড় স্ক্রীনে অনুভূমিকভাবে এবং ছোট স্ক্রীনে উল্লম্বভাবে আইটেমগুলো সাজানো।
• এই প্রক্রিয়া Flexbox-কে আরও নমনীয় এবং কার্যকরী করে তোলে, যেখানে বিভিন্ন লেভেলে বিভিন্ন ধরনের বিন্যাস ব্যবহৃত হয়।