display: flex এবং display: inline-flex এর ব্যবহার

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 ইনলাইন-লেভেল কনটেইনার তৈরি করতে ব্যবহার করা হয়।

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