Flexbox কনটেইনার এবং ফ্লেক্স আইটেমস

Flexbox লেআউট দুইটি মূল ধারণার উপর ভিত্তি করে কাজ করে: Flex Container (ফ্লেক্স কনটেইনার) এবং Flex Items (ফ্লেক্স আইটেমস)। Flex Container হলো প্যারেন্ট উপাদান, আর এর মধ্যে থাকা উপাদানগুলো হলো Flex Items। এই দুটি একসঙ্গে কাজ করে উপাদানগুলোকে সঠিকভাবে সাজায়।

Flex Container (ফ্লেক্স কনটেইনার)

Flex Container কী?

Flex Container হলো সেই HTML উপাদান যা Flexbox মডেল সক্রিয় করার জন্য ব্যবহৃত হয়। এটি উপাদানগুলোর বিন্যাস এবং স্থান ব্যবস্থাপনার নিয়ন্ত্রণ করে।

Flex Container সক্রিয় করা

Flex Container সক্রিয় করতে display প্রপার্টি ব্যবহার করা হয়:

• display: flex;: ব্লক-লেভেল ফ্লেক্স কনটেইনার তৈরি করে।
• display: inline-flex;: ইনলাইন-লেভেল ফ্লেক্স কনটেইনার তৈরি করে।

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

.flex-container {
  display: flex;
}

Flex Container-এর প্রপার্টিস

Flex Container-এর বিভিন্ন প্রপার্টি উপাদানগুলোর বিন্যাস নিয়ন্ত্রণ করে:

• flex-direction: উপাদানগুলোর দিক নির্ধারণ করে। মানসমূহ:
  • row (ডিফল্ট): অনুভূমিকভাবে বাম থেকে ডানে।
  • row-reverse: অনুভূমিকভাবে ডান থেকে বামে।
  • column: উল্লম্বভাবে উপরে থেকে নিচে।
  • column-reverse: উল্লম্বভাবে নিচ থেকে উপরে।
• justify-content: অনুভূমিক অক্ষে উপাদানগুলোর বিন্যাস নিয়ন্ত্রণ করে। মানসমূহ:
  • flex-start (ডিফল্ট): বামে।
  • flex-end: ডানে।
  • center: কেন্দ্রে।
  • space-between: সমান দূরত্বে।
  • space-around: সমান প্যাডিং সহ।
• align-items: উল্লম্ব অক্ষে উপাদানগুলোর বিন্যাস নির্ধারণ করে। মানসমূহ:
  • stretch (ডিফল্ট): কন্টেইনারের উচ্চতা অনুসারে।
  • flex-start: উপরের দিকে।
  • flex-end: নিচের দিকে।
  • center: কেন্দ্রে।
  • baseline: টেক্সটের বেসলাইনে।
• align-content: মাল্টি-লাইনে উপাদানগুলোর বিন্যাস নিয়ন্ত্রণ করে (যখন ফ্লেক্স আইটেমগুলো একাধিক লাইনে থাকে)।

Flex Items (ফ্লেক্স আইটেমস)

Flex Items কী?

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

<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 Items-এর প্রপার্টিস

Flex Items-এর বিভিন্ন প্রপার্টি তাদের আকার, বিন্যাস এবং স্থান নির্ধারণ করে:

• order: আইটেমগুলোর প্রদর্শনের ক্রম পরিবর্তন করে।

  .flex-item {
    order: 2;
  }
  

• flex-grow: আইটেম কতটুকু জায়গা দখল করবে তা নির্ধারণ করে।

  .flex-item {
    flex-grow: 1;
  }
  

• flex-shrink: আইটেম সংকুচিত হতে পারবে কিনা তা নিয়ন্ত্রণ করে।

  .flex-item {
    flex-shrink: 0;
  }
  

• flex-basis: আইটেমের প্রাথমিক আকার নির্ধারণ করে।

  .flex-item {
    flex-basis: 100px;
  }
  

• align-self: নির্দিষ্ট একটি আইটেমের উল্লম্ব অক্ষে বিন্যাস পরিবর্তন করে। এটি align-items-কে ওভাররাইড করে।

  .flex-item {
    align-self: center;
  }
  

উদাহরণ

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

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
  background-color: lightgray;
}

.flex-item {
  background-color: teal;
  color: white;
  padding: 20px;
  flex: 1;
  margin: 5px;
}

এই উদাহরণে Flex Container এবং Flex Items-এর মাধ্যমে উপাদানগুলো একই সারিতে সমানভাবে বিন্যস্ত এবং কেন্দ্রভূত করা হয়েছে।

Flex Container এবং Flex Items একসঙ্গে কাজ করে Flexbox-এর শক্তি ও নমনীয়তা নিশ্চিত করে। এটি ওয়েব ডিজাইনে জটিল লেআউট সহজ করতে অত্যন্ত কার্যকর।

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-কে অত্যন্ত কার্যকর এবং নমনীয় করে তোলে।

Flexbox ব্যবহার শুরু করার জন্য HTML এবং CSS-এ কিছু প্রাথমিক কনফিগারেশন প্রয়োজন। Flexbox সক্রিয় করতে display: flex; প্রপার্টি ব্যবহৃত হয় এবং এটি Flex Container এবং Flex Items-এর মধ্যে সম্পর্ক স্থাপন করে। নিচে Flexbox-এর জন্য প্রয়োজনীয় প্রাথমিক সেটআপ তুলে ধরা হলো।

HTML গঠন

Flexbox কনফিগারেশনের জন্য HTML ফাইলটি নিম্নরূপ হতে পারে:

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

CSS প্রাথমিক কনফিগারেশন

Flex Container-এর জন্য কনফিগারেশন

Flex Container-এ Flexbox সক্রিয় করতে এবং এর প্রাথমিক নিয়ন্ত্রণ করতে নিচের CSS ব্যবহার করা হয়:

.flex-container {
  display: flex; /* Flexbox সক্রিয় করে */
  flex-direction: row; /* ডিফল্ট: অনুভূমিকভাবে বিন্যাস */
  justify-content: flex-start; /* অনুভূমিকভাবে বাম দিকে বিন্যাস */
  align-items: stretch; /* উল্লম্বভাবে সমস্ত আইটেম সমান উচ্চতায় টানটান */
  gap: 10px; /* Flex Items-এর মধ্যে ফাঁকা জায়গা */
}

Flex Items-এর জন্য কনফিগারেশন

Flex Items-এর আকার এবং বিন্যাস নিয়ন্ত্রণের জন্য নিচের CSS ব্যবহার করা যায়:

.flex-item {
  flex: 1; /* প্রতিটি আইটেম সমান জায়গা নেবে */
  padding: 20px;
  background-color: lightblue;
  text-align: center;
  border: 1px solid #ccc;
}

Flexbox প্রপার্টিসের সংক্ষিপ্ত বিবরণ

Flex Container-এর প্রপার্টিস

1. display: flex;
   • Flexbox লেআউট সক্রিয় করে।
   • display: inline-flex; ব্যবহার করলে ইনলাইন লেভেল কনটেইনার তৈরি হয়।
2. flex-direction
   • ফ্লেক্স আইটেমগুলোর বিন্যাসের দিক নির্ধারণ করে।
   • ডিফল্ট মান: row (বাম থেকে ডানে)।
3. justify-content
   • অনুভূমিক অক্ষে ফ্লেক্স আইটেমের বিন্যাস নির্ধারণ করে।
   • মান: flex-start, flex-end, center, space-between, space-around, space-evenly।
4. align-items
   • উল্লম্ব অক্ষে ফ্লেক্স আইটেমের বিন্যাস নির্ধারণ করে।
   • মান: stretch, flex-start, flex-end, center, baseline।
5. flex-wrap
   • আইটেমগুলো একাধিক লাইনে বিভক্ত হবে কিনা তা নির্ধারণ করে।
   • মান: nowrap (ডিফল্ট), wrap, wrap-reverse।
6. gap
   • ফ্লেক্স আইটেমগুলোর মধ্যে ফাঁকা জায়গা তৈরি করে।

Flex Items-এর প্রপার্টিস

1. order
   • ফ্লেক্স আইটেমের প্রদর্শনের ক্রম নির্ধারণ করে।
2. flex-grow
   • ফ্লেক্স আইটেম অতিরিক্ত জায়গা দখল করবে কিনা তা নির্ধারণ করে।
3. flex-shrink
   • ফ্লেক্স আইটেম সংকুচিত হবে কিনা তা নির্ধারণ করে।
4. flex-basis
   • ফ্লেক্স আইটেমের প্রাথমিক আকার নির্ধারণ করে।
5. align-self
   • নির্দিষ্ট একটি আইটেমের বিন্যাস কনটেইনারের align-items-কে ওভাররাইড করে।

উদাহরণ কোড

HTML

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

CSS

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background-color: #f0f0f0;
}

.flex-item {
  flex: 1;
  padding: 20px;
  background-color: #007bff;
  color: white;
  text-align: center;
}

আউটপুট

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

Flexbox সক্রিয় করতে CSS-এ display প্রপার্টি ব্যবহার করা হয়। এর দুটি সাধারণ মান হলো flex এবং inline-flex। এদের মধ্যে প্রধান পার্থক্য হলো কনটেইনারের প্রদর্শনের ধরন (block-level বা inline-level) এবং এর ব্যবহার ক্ষেত্র।

display: flex

• বিবরণ:
  display: flex; ফ্লেক্স কনটেইনারকে ব্লক-লেভেল উপাদান হিসেবে সংজ্ঞায়িত করে। এটি পুরো লাইনের জায়গা নেয় এবং এর ভেতরের উপাদানগুলো Flexbox নিয়ম অনুযায়ী বিন্যস্ত হয়।
• ব্যবহার ক্ষেত্র:
  যখন কনটেইনারের প্রতিটি লাইন সম্পূর্ণ জায়গা নেয় এবং ভেতরের আইটেমগুলো ফ্লেক্স লেআউট অনুযায়ী বিন্যস্ত হয়, তখন display: flex; ব্যবহার করা হয়।

• উদাহরণ:

  <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-around;
    background-color: lightgray;
    padding: 10px;
  }
  .flex-item {
    padding: 10px;
    background-color: teal;
    color: white;
  }
  

• আউটপুট:
  কনটেইনার ব্লক-লেভেল হওয়ায় এটি পুরো লাইনের জায়গা নেবে। এর ভেতরের আইটেমগুলো Flexbox নিয়মে অনুভূমিকভাবে সাজানো থাকবে।

display: inline-flex

• বিবরণ:
  display: inline-flex; ফ্লেক্স কনটেইনারকে ইনলাইন-লেভেল উপাদান হিসেবে সংজ্ঞায়িত করে। এটি ইনলাইন উপাদানের মতো আচরণ করে এবং পাশের অন্য ইনলাইন বা টেক্সট উপাদানের সাথে থাকে।
• ব্যবহার ক্ষেত্র:
  যখন ফ্লেক্স কনটেইনারটিকে ব্লক-লেভেলের পরিবর্তে ইনলাইন-লেভেলে রাখতে হয় এবং এর ভেতরের উপাদানগুলো Flexbox নিয়ম অনুযায়ী সাজানো হয়, তখন display: inline-flex; ব্যবহার করা হয়।

• উদাহরণ:

  <p>
    Here is some text before the flex container.
    <span class="flex-container">
      <span class="flex-item">Item 1</span>
      <span class="flex-item">Item 2</span>
    </span>
    And here is some text after it.
  </p>
  

  .flex-container {
    display: inline-flex;
    justify-content: center;
    background-color: lightgray;
    padding: 5px;
  }
  .flex-item {
    margin: 0 5px;
    padding: 5px;
    background-color: teal;
    color: white;
  }
  

• আউটপুট:
  ফ্লেক্স কনটেইনারটি ইনলাইন-লেভেল হওয়ায় এটি টেক্সটের সাথে একই লাইনে থাকে এবং এর ভেতরের আইটেমগুলো Flexbox নিয়মে অনুভূমিকভাবে সাজানো থাকে।

পার্থক্য: display: flex বনাম display: inline-flex

উদাহরণে তুলনা

HTML:

<div class="flex-block">
  <div class="flex-item">Block Flex Item 1</div>
  <div class="flex-item">Block Flex Item 2</div>
</div>

<p>
  Inline text before
  <span class="flex-inline">
    <span class="flex-item">Inline Flex Item 1</span>
    <span class="flex-item">Inline Flex Item 2</span>
  </span>
  Inline text after.
</p>

CSS:

.flex-block {
  display: flex;
  justify-content: space-between;
  background-color: lightblue;
  padding: 10px;
}

.flex-inline {
  display: inline-flex;
  justify-content: center;
  background-color: lightgray;
  padding: 5px;
}

.flex-item {
  margin: 5px;
  padding: 10px;
  background-color: teal;
  color: white;
}

আউটপুট:

1. display: flex: পুরো লাইন নেবে এবং ব্লক লেভেলের মতো আচরণ করবে।
2. display: inline-flex: টেক্সটের ভেতরে ইনলাইন উপাদানের মতো থাকবে।

সারাংশ

• display: flex ব্লক-লেভেল কনটেইনার তৈরি করতে ব্যবহার করা হয়।
• display: inline-flex ইনলাইন-লেভেল কনটেইনার তৈরি করতে ব্যবহার করা হয়।

এগুলোর সঠিক ব্যবহার নির্ভর করে ডিজাইনের প্রয়োজনীয়তার উপর।

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-এর কার্যকারিতা এদের পারস্পরিক সম্পর্কের মাধ্যমে সুনিশ্চিত হয়।