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

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

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

1. Flex Container Flex Items-এর নিয়ন্ত্রক

Flex Container হলো সেই জায়গা যেখানে Flexbox মডেল সক্রিয় হয়। এটি Flex Items-এর বিন্যাস, আকার, স্থান এবং দিক নির্ধারণ করে।

• Flex Container-এর মাধ্যমে আইটেমগুলোর বিন্যাস:
  Flex Container-এর flex-direction, justify-content, এবং align-items প্রপার্টি Flex Items-এর দিক, বিন্যাস, এবং কেন্দ্রবিন্দু নির্ধারণ করে।

  .flex-container {
    display: flex;               /* Flexbox সক্রিয় */
    flex-direction: row;         /* অনুভূমিক বিন্যাস */
    justify-content: space-around; /* আইটেমগুলোর মধ্যে সমান দূরত্ব */
    align-items: center;         /* উল্লম্বভাবে কেন্দ্রীভূত */
  }
  

2. Flex Items Flex Container-এর অংশ

Flex Items হলো Flex Container-এর ভেতরে থাকা উপাদান। এগুলো কনটেইনারের প্রপার্টি দ্বারা প্রভাবিত হয় এবং তাদের নিজস্ব প্রপার্টি ব্যবহার করে অতিরিক্ত আচরণ নির্ধারণ করতে পারে।

• Flex Items-এর বিন্যাস কন্টেইনার নির্ধারণ করে:
  Flex Container-এর flex-wrap বা justify-content Flex Items-এর স্থান দখল এবং বিন্যাস নির্ধারণ করে।

  .flex-item {
    flex-grow: 1; /* অতিরিক্ত জায়গা সমানভাবে দখল করবে */
    flex-shrink: 0; /* সংকুচিত হবে না */
    flex-basis: 100px; /* প্রাথমিক আকার 100px */
  }
  

3. Flex Items এর নিজস্ব আচরণ

Flex Items Flex Container-এর প্রপার্টির ওপর ভিত্তি করে সাজানো হয়। তবে, Flex Items নিজের বৈশিষ্ট্য নির্ধারণের জন্য order, flex-grow, flex-shrink, এবং align-self ব্যবহার করতে পারে।

• order: Flex Items-এর প্রদর্শনের ক্রম পরিবর্তন করে।

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

• align-self: নির্দিষ্ট Flex Items-এর উল্লম্ব অক্ষে বিন্যাস নির্ধারণ করে।

  .flex-item {
    align-self: flex-start; /* কনটেইনারের উল্লম্ব অক্ষের শীর্ষে বিন্যস্ত হবে */
  }
  

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;
  flex-direction: row; /* অনুভূমিকভাবে আইটেম সাজাবে */
  justify-content: space-between; /* আইটেমগুলোর মধ্যে সমান দূরত্ব */
  align-items: center; /* উল্লম্বভাবে কেন্দ্রে আইটেমগুলো সাজাবে */
}

.flex-item {
  flex-grow: 1; /* প্রতিটি আইটেম সমানভাবে বাড়বে */
  padding: 10px;
  background-color: teal;
  color: white;
  text-align: center;
}

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

1. Flex Container-এর প্রপার্টি Flex Items-এর দিক, স্থান এবং বিন্যাস নির্ধারণ করে।
2. Flex Items Flex Container-এর নিয়ম মেনে নিজেদের আকার ও অবস্থান পরিবর্তন করে।

Flex Container এবং Flex Items এর সম্পর্কের মূল পয়েন্ট

সারাংশ

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