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

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 প্রপার্টি এবং বিন্যাস সঠিকভাবে সমন্বয় করলে আপনি খুবই শক্তিশালী এবং নমনীয় লেআউট ডিজাইন করতে পারবেন।