Flex Containers এবং Flex Items

Bulma একটি ফ্লেক্সবক্স (Flexbox)-ভিত্তিক CSS ফ্রেমওয়ার্ক, যা আপনাকে ওয়েব পেজের লেআউট অত্যন্ত নমনীয় এবং রেসপনসিভভাবে ডিজাইন করতে সাহায্য করে। Flex Containers এবং Flex Items হলো ফ্লেক্সবক্স লেআউট সিস্টেমের দুটি মূল উপাদান, যা আপনাকে উপাদানগুলির স্থান নির্ধারণ এবং সজ্জিত করার জন্য শক্তিশালী নিয়ন্ত্রণ প্রদান করে। এখানে আমরা Bulma তে Flex Containers এবং Flex Items কিভাবে ব্যবহার করা যায় তা বিস্তারিতভাবে আলোচনা করব।

১. Flex Containers

Flex Container হলো এমন একটি কন্টেইনার যা তার অভ্যন্তরীণ উপাদানগুলিকে (Flex Items) ফ্লেক্সবক্স পদ্ধতিতে সাজানোর জন্য ব্যবহৃত হয়। Bulma তে columns ক্লাসটি একটি ফ্লেক্স কন্টেইনার হিসেবে কাজ করে, যা কন্টেইনারের ভিতরে উপাদানগুলোকে সজ্জিত করে।

Flex Container এর ব্যবহার:

<div class="columns">
  <div class="column">
    <!-- Column 1 Content -->
  </div>
  <div class="column">
    <!-- Column 2 Content -->
  </div>
  <div class="column">
    <!-- Column 3 Content -->
  </div>
</div>

Bulma এর columns ক্লাস:

• columns ক্লাসটি একটি ফ্লেক্স কন্টেইনার হিসাবে কাজ করে।
• এটি স্বয়ংক্রিয়ভাবে কন্টেইনারের ভিতরে থাকা column উপাদানগুলির মধ্যে স্থান নির্ধারণ করে এবং তাদের সঠিকভাবে সজ্জিত করে।

২. Flex Items

Flex Items হলো ফ্লেক্স কন্টেইনারের ভিতরে থাকা উপাদানগুলি, যেগুলি ফ্লেক্সবক্স সিস্টেমের মাধ্যমে সজ্জিত করা হয়। Bulma তে column ক্লাস একটি Flex Item হিসেবে কাজ করে, এবং এই ক্লাসটির মাধ্যমে আপনি বিভিন্ন কলাম তৈরি করতে পারেন।

Flex Items এর ব্যবহার:

<div class="columns">
  <div class="column is-one-third">
    <!-- Column 1 Content -->
  </div>
  <div class="column is-one-third">
    <!-- Column 2 Content -->
  </div>
  <div class="column is-one-third">
    <!-- Column 3 Content -->
  </div>
</div>

Bulma এর column ক্লাস:

• column ক্লাসটি Flex Item হিসেবে কাজ করে। এটি একটি ফ্লেক্স আইটেমের রূপে কন্টেইনারের ভিতরে থাকে এবং কন্টেইনারের মধ্যে প্রস্থ নির্ধারণ করতে সহায়তা করে।
• is-one-third বা is-half এর মতো বিভিন্ন সাইজ ক্লাস ব্যবহার করে আপনি প্রতিটি column এর প্রস্থ কাস্টমাইজ করতে পারেন।

৩. Flex Containers এর কিছু আরও বৈশিষ্ট্য

Bulma তে Flex Containers এর কিছু অতিরিক্ত বৈশিষ্ট্যও রয়েছে, যেমন উপাদানগুলির স্থান আলাদা করা, কেন্দ্রীভূত করা এবং তাদেরকে একে অপরের সাথে সজ্জিত করার জন্য ব্যবহার করা হয়।

কলামের মধ্যে গ্যাপ তৈরি করা:

Bulma তে আপনি columns ক্লাসের সাথে is-variable ক্লাস ব্যবহার করে কলামগুলোর মধ্যে গ্যাপ তৈরি করতে পারেন।

<div class="columns is-variable is-4">
  <div class="column">
    <!-- Column 1 Content -->
  </div>
  <div class="column">
    <!-- Column 2 Content -->
  </div>
  <div class="column">
    <!-- Column 3 Content -->
  </div>
</div>

এখানে is-variable is-4 ক্লাস ব্যবহারের মাধ্যমে কলামের মধ্যে ৪ পিক্সেলের গ্যাপ তৈরি হয়েছে।

কলামগুলিকে কেন্দ্রীভূত করা:

আপনি Flex Containers এর ভিতরে থাকা Flex Items (যেমন column) কে সহজেই কেন্দ্রীভূত করতে পারেন। এর জন্য is-centered ক্লাস ব্যবহার করতে হয়।

<div class="columns is-centered">
  <div class="column is-half">
    <!-- Column Content -->
  </div>
</div>

এখানে is-centered ক্লাসটি কলামগুলিকে কেন্দ্রীভূত করবে।

৪. Flex Items এর কিছু অতিরিক্ত বৈশিষ্ট্য

Flex Items এর বিভিন্ন স্টাইল কাস্টমাইজ করা যায়। Bulma তে Flex Items এর জন্য কিছু অতিরিক্ত ক্লাস যেমন is-half, is-one-quarter, is-full ইত্যাদি ব্যবহার করা যায়। এগুলোর মাধ্যমে আপনি প্রতিটি ফ্লেক্স আইটেমের আকার এবং অবস্থান কাস্টমাইজ করতে পারেন।

Flex Items সাইজ কাস্টমাইজ করা:

<div class="columns">
  <div class="column is-one-quarter">
    <!-- Column 1 Content -->
  </div>
  <div class="column is-half">
    <!-- Column 2 Content -->
  </div>
  <div class="column is-one-quarter">
    <!-- Column 3 Content -->
  </div>
</div>

এখানে প্রথম এবং তৃতীয় কলামটি is-one-quarter সাইজের, এবং মধ্যবর্তী কলামটি is-half সাইজের।

Flex Items এর Alignment:

Flex Items কে Align করতে আপনাকে is-align-items-center, is-align-items-flex-start, is-align-items-flex-end ক্লাস ব্যবহার করতে হবে।

<div class="columns is-align-items-center">
  <div class="column">
    <!-- Column 1 Content -->
  </div>
  <div class="column">
    <!-- Column 2 Content -->
  </div>
</div>

এখানে is-align-items-center ক্লাস ব্যবহার করা হয়েছে যাতে কলামগুলো কেন্দ্রিত অবস্থায় থাকে।

উদাহরণ: Flex Containers এবং Flex Items এর সম্পূর্ণ কোড

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bulma Flex Containers</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>

  <!-- Flex Container with Flex Items -->
  <div class="columns is-variable is-4">
    <div class="column is-one-third">
      <div class="box">Column 1</div>
    </div>
    <div class="column is-one-third">
      <div class="box">Column 2</div>
    </div>
    <div class="column is-one-third">
      <div class="box">Column 3</div>
    </div>
  </div>

  <!-- Flex Container with Centered Flex Items -->
  <div class="columns is-centered">
    <div class="column is-half">
      <div class="box">Centered Column</div>
    </div>
  </div>

</body>
</html>

সারাংশ

• Flex Containers: Bulma তে columns ক্লাস একটি ফ্লেক্স কন্টেইনার হিসেবে কাজ করে এবং এতে থাকা column ক্লাসগুলি Flex Items হিসেবে কাজ করে।
• Flex Items: column ক্লাস ব্যবহার করে আপনি Flex Items তৈরি করতে পারেন এবং সেগুলির সাইজ কাস্টমাইজ করতে পারেন (যেমন is-one-third, is-half ইত্যাদি)।
• Alignments and Spacing: is-centered, is-align-items-center, is-variable ক্লাস ব্যবহার করে আপনি Flex Items এর অবস্থান এবং স্পেসিং নিয়ন্ত্রণ করতে পারেন।

Bulma এর ফ্লেক্সবক্স সিস্টেম ব্যবহারের মাধ্যমে, আপনি খুব সহজেই একটি রেসপনসিভ এবং আধুনিক লেআউট ডিজাইন করতে পারবেন।