Flex Container এবং Flex Items এর ভূমিকা

Flexbox লেআউট সিস্টেমে Flex Container এবং Flex Items একে অপরের পরিপূরক। এদের সুনির্দিষ্ট ভূমিকা Flexbox-এর কার্যকারিতা এবং ব্যবহার সহজ করে তোলে।

Flex Container এর ভূমিকা

1. Flexbox লেআউট সক্রিয় করা:

Flex Container সেই প্যারেন্ট উপাদান যেখানে Flexbox লেআউট সক্রিয় হয়। এটি display: flex; বা display: inline-flex; ব্যবহার করে নির্ধারণ করা হয়।

.flex-container {
  display: flex;
}

2. উপাদান সাজানোর নিয়ন্ত্রণ:

Flex Container ফ্লেক্স আইটেমগুলোর সারি (row) বা কলামে (column) বিন্যাস নির্ধারণ করে। এর জন্য flex-direction প্রপার্টি ব্যবহার করা হয়।

.flex-container {
  flex-direction: row; /* Default: বাম থেকে ডান */
}

3. স্থান ব্যবস্থাপনা:

Flex Container অনুভূমিক এবং উল্লম্ব উভয় অক্ষেই ফ্লেক্স আইটেমগুলোর স্থান নির্ধারণ করে। উদাহরণ:

• justify-content অনুভূমিক অক্ষের স্থান নির্ধারণ করে।
• align-items উল্লম্ব অক্ষের বিন্যাস নিয়ন্ত্রণ করে।

.flex-container {
  justify-content: center; /* অনুভূমিকভাবে কেন্দ্রীভূত */
  align-items: center;    /* উল্লম্বভাবে কেন্দ্রীভূত */
}

4. মাল্টি-লাইন ব্যবস্থাপনা:

যদি ফ্লেক্স আইটেমগুলো এক লাইনে না ধরে, তখন flex-wrap প্রপার্টি ব্যবহার করে মাল্টি-লাইন তৈরির অনুমতি দেওয়া যায়।

.flex-container {
  flex-wrap: wrap; /* একাধিক লাইনে উপাদান সাজানোর অনুমতি */
}

5. আইটেমগুলোর গোষ্ঠী ব্যবস্থাপনা:

Flex Container উপাদানগুলোকে একটি দল হিসেবে পরিচালনা করে এবং তাদের মধ্যে স্থান এবং বিন্যাস নিয়ন্ত্রণ করে।

Flex Items এর ভূমিকা

1. Flex Container এর শিশু উপাদান:

Flex Items হলো Flex Container-এর মধ্যে থাকা প্রত্যেকটি শিশু উপাদান। Flexbox লেআউটে এগুলো সরাসরি প্রভাবিত হয়।

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
</div>

2. ক্রমানুসারে বিন্যাস:

Flex Items-এর প্রদর্শনের ক্রম order প্রপার্টি ব্যবহার করে পরিবর্তন করা যায়, যা HTML কোডের ক্রম থেকে আলাদা।

.flex-item {
  order: 2; /* দ্বিতীয় আইটেম প্রথমে প্রদর্শিত হবে */
}

3. আকার এবং স্থান দখল:

Flex Items কতটুকু জায়গা দখল করবে তা flex-grow, flex-shrink, এবং flex-basis প্রপার্টি দিয়ে নির্ধারণ করা যায়।

.flex-item {
  flex-grow: 1; /* অতিরিক্ত জায়গা সমানভাবে দখল করবে */
}

4. স্বতন্ত্র বিন্যাস:

Flex Items নিজেদের উল্লম্ব অক্ষে আলাদাভাবে বিন্যস্ত করতে align-self ব্যবহার করতে পারে, যা কন্টেইনারের align-items সেটিংসকে ওভাররাইড করে।

.flex-item {
  align-self: center; /* নির্দিষ্ট আইটেম উল্লম্বভাবে কেন্দ্রীভূত */
}

5. ফ্লেক্সের উপর নির্ভর করে সংকোচন এবং প্রসারণ:

Flex Items স্বয়ংক্রিয়ভাবে সংকুচিত বা প্রসারিত হয় Flexbox কনটেইনারের স্থানের উপর ভিত্তি করে।

Flex Container এবং Flex Items এর সম্পর্ক

Flex Container এবং Flex Items একসঙ্গে Flexbox লেআউটের মূল ভিত্তি গঠন করে:

• Flex Container ফ্লেক্স আইটেমগুলোর বিন্যাস এবং স্থান নির্ধারণ করে।
• Flex Items ফ্লেক্স কনটেইনারের অভ্যন্তরে নিজেদের আকার এবং বিন্যাস সামঞ্জস্য করে।

উদাহরণ:

<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>

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex-grow: 1;
  margin: 5px;
  padding: 10px;
  background-color: lightblue;
}

Flex Container উপাদানগুলোর সাজানো এবং বিন্যাস নিয়ন্ত্রণের মূল কেন্দ্র, যেখানে Flex Items স্বয়ংক্রিয়ভাবে সেই নির্দেশনা অনুযায়ী নিজেদের অবস্থান এবং আকার নিয়ন্ত্রণ করে। এই সমন্বয় Flexbox-কে অত্যন্ত কার্যকর এবং নমনীয় করে তোলে।