Nested Flexbox (Flexbox এর মধ্যে Flexbox)

Flexbox-এর মধ্যে Flexbox ব্যবহার করা হয় যখন একটি Flexbox কন্টেইনারের মধ্যে আরেকটি Flexbox কন্টেইনার তৈরি করতে হয়, যা Flexbox লেআউটের আরও জটিল কাঠামো তৈরি করতে সহায়তা করে। এই ধরনের nested structure আপনাকে বিভিন্ন স্তরে উপাদানগুলোর বিন্যাস এবং স্থান ব্যবস্থাপনা করার সুযোগ দেয়।

Nested Flexbox ব্যবহার করে আপনি মূল কন্টেইনারে একটি Flexbox সেট আপ করেন এবং তার মধ্যে আরও একটি Flexbox কন্টেইনার তৈরি করে দ্বিতীয় স্তরের উপাদানগুলোর বিন্যাস নির্ধারণ করতে পারেন।

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

এটি একটি Flexbox কন্টেইনারের মধ্যে আরেকটি Flexbox কন্টেইনার তৈরি করে। এখানে প্রথম কন্টেইনার একটি প্রাথমিক Flexbox লেআউট তৈরি করে এবং তার মধ্যে থাকা আইটেমগুলো আবার দ্বিতীয় Flexbox কন্টেইনারের মধ্যে বসানো হয়। Flexbox কন্টেইনারের মধ্যে nested Flexbox কন্টেইনারটি তার নিজস্ব flex-direction, align-items, এবং অন্যান্য Flexbox প্রপার্টি ব্যবহার করে তার ভেতরের আইটেমগুলোর বিন্যাস নিয়ন্ত্রণ করবে।

Nested Flexbox ব্যবহারের উদাহরণ

HTML:

<div class="outer-flex-container">
  <div class="inner-flex-container">
    <div class="inner-flex-item">Inner Item 1</div>
    <div class="inner-flex-item">Inner Item 2</div>
    <div class="inner-flex-item">Inner Item 3</div>
  </div>
  <div class="outer-flex-item">Outer Item 1</div>
  <div class="outer-flex-item">Outer Item 2</div>
</div>

CSS:

/* Outer Flex Container */
.outer-flex-container {
  display: flex;
  justify-content: space-between;  /* Outer items এর মধ্যে সমান জায়গা */
  align-items: center;  /* Outer items কে উল্লম্বভাবে কেন্দ্রিত করবে */
  height: 200px;
  background-color: lightgray;
  padding: 10px;
}

/* Inner Flex Container */
.inner-flex-container {
  display: flex;
  flex-direction: column;  /* Inner items গুলোকে উল্লম্বভাবে সাজাবে */
  gap: 10px;
  background-color: lightblue;
  padding: 10px;
}

/* Outer Flex Items */
.outer-flex-item {
  background-color: teal;
  color: white;
  padding: 10px;
  text-align: center;
  flex: 1;
}

/* Inner Flex Items */
.inner-flex-item {
  background-color: darkcyan;
  color: white;
  padding: 10px;
  text-align: center;
}

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

1. Outer Flex Container:
   • প্রথম Flexbox কন্টেইনার .outer-flex-container এ display: flex; ব্যবহার করা হয়েছে। এটি বাইরে থাকা Flex Items গুলোকে অনুভূমিকভাবে সজ্জিত করবে এবং justify-content: space-between; এর মাধ্যমে আইটেমগুলোর মধ্যে সমান স্থান প্রদান করবে।
2. Inner Flex Container:
   • .inner-flex-container হলো একটি nested Flexbox কন্টেইনার যা আবার display: flex; এর মাধ্যমে সক্রিয় হয়েছে। এখানে flex-direction: column; ব্যবহার করা হয়েছে, যার ফলে ভেতরের আইটেমগুলো উল্লম্বভাবে সাজানো হবে। gap: 10px; ব্যবহার করে আইটেমগুলোর মধ্যে ১০ পিক্সেল ফাঁকা জায়গা রাখা হয়েছে।
3. Outer Flex Items:
   • .outer-flex-item এর মাধ্যমে flexbox আইটেমগুলো প্রদর্শিত হচ্ছে, যা কন্টেইনারের মধ্যে সমানভাবে স্থাপন হবে। তাদের মধ্যে সমান জায়গা দিতে flex: 1; ব্যবহার করা হয়েছে।
4. Inner Flex Items:
   • .inner-flex-item গুলো nested flexbox-এর ভিতরে উল্লম্বভাবে সজ্জিত হয়েছে।

Nested Flexbox এর প্রয়োজনীয়তা

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

Nested Flexbox এর আরেকটি উদাহরণ

HTML:

<div class="outer-container">
  <div class="inner-container">
    <div class="inner-item">Item 1</div>
    <div class="inner-item">Item 2</div>
  </div>
  <div class="outer-item">Outer Item 1</div>
  <div class="outer-item">Outer Item 2</div>
</div>

CSS:

/* Outer Container */
.outer-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 200px;
  background-color: lightgray;
}

/* Inner Container */
.inner-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  background-color: lightblue;
  padding: 10px;
}

/* Outer Items */
.outer-item {
  background-color: teal;
  color: white;
  padding: 10px;
}

/* Inner Items */
.inner-item {
  background-color: darkcyan;
  color: white;
  padding: 10px;
}

Nested Flexbox এর সারাংশ

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

Nested Flexbox ব্যবহার করে আপনি ওয়েব পেজের জটিল লেআউট সহজে ডিজাইন করতে পারেন।

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-কে আরও নমনীয় এবং কার্যকরী করে তোলে, যেখানে বিভিন্ন লেভেলে বিভিন্ন ধরনের বিন্যাস ব্যবহৃত হয়।

Flexbox লেআউট সিস্টেমে Parent Flex Container এবং Child Flex Containers এর মধ্যে সম্পর্ক গুরুত্বপূর্ণ, কারণ Parent কন্টেইনারের প্রপার্টি Child কন্টেইনারের বিন্যাস ও আচরণকে প্রভাবিত করে। তবে, যখন একটি Flex Container এর মধ্যে আরেকটি Flex Container থাকে (Child Flex Container), তখন তাদের মধ্যে সম্পর্ক একটু জটিল হয়ে উঠতে পারে। এ সম্পর্ক বোঝা Flexbox ব্যবহারে সাহায্য করে এবং উক্ত কন্টেইনারগুলোকে সঠিকভাবে সাজাতে সুবিধা দেয়।

Parent Flex Container (প্যারেন্ট কন্টেইনার)

Flexbox লেআউট সিস্টেমে Parent Flex Container হলো মূল কন্টেইনার, যেখানে আপনি display: flex; ব্যবহার করে Flexbox সক্রিয় করেন। Parent কন্টেইনারে থাকা সমস্ত Child Flex Containers তাদের নিজস্ব বিন্যাস অনুযায়ী কাজ করে, কিন্তু তারা মূল কন্টেইনারের প্রভাবের অধীনে থাকে।

Parent কন্টেইনারের বৈশিষ্ট্যসমূহ:

1. display: flex;
   Parent কন্টেইনারে Flexbox সক্রিয় করতে এটি ব্যবহার করা হয়।

   .parent-container {
     display: flex;
   }
   

2. flex-direction
   Parent কন্টেইনারের মধ্যে সব উপাদান (ফ্লেক্স আইটেমস) কে অনুভূমিক (row) বা উল্লম্ব (column) সাজানো হয়।

   .parent-container {
     flex-direction: row; /* অনুভূমিক বিন্যাস */
   }
   

3. justify-content
   Parent কন্টেইনারের মধ্যে Flex Items গুলোর অনুভূমিক বিন্যাস নিয়ন্ত্রণ করে।

   .parent-container {
     justify-content: center; /* কেন্দ্রে স্থান দেয় */
   }
   

4. align-items
   Parent কন্টেইনারের মধ্যে Flex Items গুলোর উল্লম্ব অবস্থান নিয়ন্ত্রণ করে।

   .parent-container {
     align-items: center; /* আইটেমগুলোকে উল্লম্বভাবে কেন্দ্রে রাখবে */
   }
   

Child Flex Containers (চাইল্ড ফ্লেক্স কন্টেইনার)

যখন Parent Flex Container-এর মধ্যে একটি Child Flex Container থাকে, তখন Child কন্টেইনারের মধ্যে আবার display: flex; ব্যবহার করে Flexbox সক্রিয় করা হয়। Child কন্টেইনারের Flex Items এবং Parent কন্টেইনারের Flex Items আলাদা ভাবে নিয়ন্ত্রিত হয়, তবে Child কন্টেইনার Parent কন্টেইনারের প্রভাবের অধীনে থাকে।

Child Flex Container-এর বৈশিষ্ট্যসমূহ:

1. Child কন্টেইনারের display: flex;
   Child কন্টেইনারে Flexbox সক্রিয় করতে এটি ব্যবহার করা হয়।

   .child-container {
     display: flex;
   }
   

2. flex-direction
   Child কন্টেইনারে Flex Items গুলোর বিন্যাস নিয়ন্ত্রণ করে।

   .child-container {
     flex-direction: column; /* উল্লম্ব বিন্যাস */
   }
   

3. justify-content
   Child কন্টেইনারের মধ্যে আইটেমগুলোর অনুভূমিক বিন্যাস নিয়ন্ত্রণ করে।

   .child-container {
     justify-content: space-between;
   }
   

4. align-items
   Child কন্টেইনারের Flex Items গুলোর উল্লম্ব অবস্থান নিয়ন্ত্রণ করে।

   .child-container {
     align-items: flex-start; /* উপরের দিকে অবস্থান */
   }
   

Parent এবং Child Flex Containers এর মধ্যে সম্পর্ক

1. Parent কন্টেইনারের প্রভাব:
   Parent Flex Container এর প্রপার্টি (যেমন flex-direction, justify-content, align-items ইত্যাদি) Child Flex Containers-এর অবস্থান এবং বিন্যাসে প্রভাব ফেলে, কারণ Child কন্টেইনার গুলি Parent কন্টেইনারের ভিতরে থাকে।
2. Child কন্টেইনারের নিয়ন্ত্রণ:
   Child Flex Containers তাদের নিজস্ব Flex Items গুলোর বিন্যাস এবং স্থান নিয়ন্ত্রণ করে, তবে তাদের Flexbox প্রপার্টি Parent কন্টেইনারের প্রপার্টির থেকে স্বাধীনভাবে কাজ করে।
3. Nest Flex Containers:
   Parent Flex Container এবং Child Flex Containers একে অপরের ভিতরে থাকতে পারে। Child কন্টেইনার নিজস্ব Flexbox নিয়ম অনুযায়ী তার আইটেমগুলিকে সাজাতে পারে, তবে Parent কন্টেইনারের প্রভাব অনুসারে।

একমাত্রিক উদাহরণ: Parent এবং Child Flex Containers

HTML:

<div class="parent-container">
  <div class="child-container">
    <div class="child-item">Item 1</div>
    <div class="child-item">Item 2</div>
  </div>
  <div class="parent-item">Parent Item</div>
</div>

CSS:

.parent-container {
  display: flex;
  justify-content: space-between; /* Parent কন্টেইনারে স্থান সমানভাবে বিতরণ */
  align-items: center; /* উল্লম্বভাবে কেন্দ্রে অবস্থান */
  height: 300px;
  background-color: lightgray;
}

.child-container {
  display: flex;
  flex-direction: column; /* Child কন্টেইনারে আইটেম গুলো উল্লম্বভাবে সাজানো */
  gap: 10px;
  background-color: lightblue;
  padding: 10px;
}

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

.parent-item {
  background-color: coral;
  padding: 20px;
  color: white;
}

উদাহরণ বিশ্লেষণ

1. Parent কন্টেইনার: display: flex; ব্যবহার করে Flexbox সক্রিয় করা হয়েছে এবং justify-content: space-between; ব্যবহার করে আইটেমগুলোকে সমানভাবে বিতরণ করা হয়েছে।
2. Child কন্টেইনার: Child কন্টেইনারেও display: flex; ব্যবহার করা হয়েছে এবং flex-direction: column; ব্যবহার করে আইটেমগুলোকে উল্লম্বভাবে সাজানো হয়েছে।
3. Parent আইটেম: Parent কন্টেইনারের অন্য আইটেমটি (যেমন .parent-item) কেন্দ্রে অবস্থান করবে কারণ align-items: center; ব্যবহার করা হয়েছে।

সারাংশ

• Parent Flex Container এবং Child Flex Containers একে অপরের মধ্যে সম্পর্কিত, কারণ Child কন্টেইনারের বিন্যাস Parent কন্টেইনারের প্রভাবের অধীনে থাকে।
• Parent কন্টেইনার Flex Items গুলোর বিন্যাস নিয়ন্ত্রণ করে, তবে Child কন্টেইনার তার নিজস্ব Flex Items গুলোর বিন্যাস এবং স্থান নির্ধারণ করে।
• Parent এবং Child কন্টেইনারের 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-এর মাধ্যমে বিভিন্ন স্তরের মধ্যে উপাদানগুলোর বিন্যাস সহজেই নিয়ন্ত্রণ করা যায়।