Flexbox এর সাথে Alignment এবং Justification

Bulma ফ্রেমওয়ার্ক Flexbox-এর উপর ভিত্তি করে ডিজাইন করা হয়েছে, যা লেআউট ম্যানেজমেন্টে অত্যন্ত কার্যকরী এবং সহজ। Flexbox আপনাকে উপাদানগুলোকে একটি কন্টেইনারের মধ্যে সঠিকভাবে সাজানোর জন্য Alignment এবং Justification এর শক্তিশালী অপশন প্রদান করে।

Bulma ফ্রেমওয়ার্কে Alignment এবং Justification খুব সহজেই করা যায় is-align-items-* এবং is-justify-content-* ক্লাসের মাধ্যমে।

১. Flexbox Alignment

Alignment এর মাধ্যমে আপনি উপাদানগুলোকে কন্টেইনারের মধ্যে কিভাবে সঠিকভাবে অবস্থান করাবেন তা নিয়ন্ত্রণ করতে পারবেন। Align-items এবং Align-self দুটি গুরুত্বপূর্ণ CSS প্রপার্টি যা Flexbox-এ Alignment নিয়ন্ত্রণে ব্যবহার হয়।

Bulma এর Alignment ক্লাস:

• is-align-items-flex-start: উপাদানগুলোকে কন্টেইনারের উপরের দিকে রেখে সাজাবে।
• is-align-items-center: উপাদানগুলোকে কন্টেইনারের সেন্টারে বসাবে।
• is-align-items-flex-end: উপাদানগুলোকে কন্টেইনারের নীচে রাখবে।
• is-align-items-stretch: উপাদানগুলোকে কন্টেইনারের পুরো উচ্চতায় প্রসারিত করবে।

উদাহরণ: Flexbox Alignment

<div class="columns is-align-items-center">
  <div class="column">
    <p class="box">Column 1</p>
  </div>
  <div class="column">
    <p class="box">Column 2</p>
  </div>
  <div class="column">
    <p class="box">Column 3</p>
  </div>
</div>

এখানে:

• is-align-items-center ক্লাসটি কনটেইনারের মধ্যে কলামগুলিকে সেন্টার করে রেখেছে।

২. Flexbox Justification

Justification এর মাধ্যমে আপনি উপাদানগুলোর মধ্যে খালি জায়গা কিভাবে বিতরণ করবেন তা নিয়ন্ত্রণ করতে পারবেন। Justify-content প্রপার্টি Flexbox-এ উপাদানগুলোকে উপরের বা নিচের দিকে বা সমানভাবে বিতরণ করতে ব্যবহৃত হয়।

Bulma এর Justification ক্লাস:

• is-justify-content-flex-start: উপাদানগুলোকে কন্টেইনারের বাম দিকে সাজাবে।
• is-justify-content-center: উপাদানগুলোকে কন্টেইনারের মাঝখানে সেন্টার করবে।
• is-justify-content-flex-end: উপাদানগুলোকে কন্টেইনারের ডানদিকে রাখবে।
• is-justify-content-space-between: উপাদানগুলোর মধ্যে সমান জায়গা দিয়ে সাজাবে, প্রথম এবং শেষ উপাদান কন্টেইনারের প্রান্তে থাকবে।
• is-justify-content-space-around: উপাদানগুলোর মধ্যে সমান জায়গা প্রদান করবে, তবে প্রথম এবং শেষ উপাদান কন্টেইনারের প্রান্তে থাকবে না।
• is-justify-content-space-evenly: উপাদানগুলোর মধ্যে সমানভাবে জায়গা দেবে এবং প্রথম এবং শেষ উপাদানও সমান দূরত্বে থাকবে।

উদাহরণ: Flexbox Justification

<div class="columns is-justify-content-space-between">
  <div class="column">
    <p class="box">Column 1</p>
  </div>
  <div class="column">
    <p class="box">Column 2</p>
  </div>
  <div class="column">
    <p class="box">Column 3</p>
  </div>
</div>

এখানে:

• is-justify-content-space-between ক্লাসটি কলামগুলোর মধ্যে সমান জায়গা দিয়ে সাজিয়ে রেখেছে, তবে প্রথম এবং শেষ কলাম কন্টেইনারের প্রান্তে থাকবে।

৩. Flexbox Alignment এবং Justification একসাথে ব্যবহার

আপনি Alignment এবং Justification একসাথে ব্যবহার করে আরও সূক্ষ্মভাবে কনটেন্ট সাজাতে পারেন। উদাহরণস্বরূপ, আপনি কলামগুলোকে সেন্টারে এবং তাদের মধ্যে সমান জায়গা দিয়ে সাজাতে পারেন।

উদাহরণ: Alignment এবং Justification একসাথে

<div class="columns is-align-items-center is-justify-content-space-around">
  <div class="column">
    <p class="box">Column 1</p>
  </div>
  <div class="column">
    <p class="box">Column 2</p>
  </div>
  <div class="column">
    <p class="box">Column 3</p>
  </div>
</div>

এখানে:

• is-align-items-center কলামগুলোকে কন্টেইনারের সেন্টারে সজ্জিত করেছে।
• is-justify-content-space-around কলামগুলোর মধ্যে সমান জায়গা দিয়েছে।

৪. Flexbox Alignment এবং Justification এর প্রাসঙ্গিকতা

Bulma ফ্রেমওয়ার্কে Flexbox Alignment এবং Justification খুবই শক্তিশালী টুলস, যা ওয়েব ডিজাইনে উপাদানগুলোর পজিশনিং, সাজানো, এবং ডিসপ্লে কাস্টমাইজ করার জন্য ব্যবহার হয়। এগুলি ওয়েব পৃষ্ঠাগুলোর মধ্যে উপাদানগুলোকে যথাযথভাবে স্থান দিতে এবং রেসপনসিভ ডিজাইন তৈরি করতে সাহায্য করে।

৫. ফলস স্লট ব্যবহার করা

আপনি যদি flexbox উপাদানগুলোকে সঠিকভাবে পরিচালনা করতে চান তবে flex-wrap প্রপার্টি ব্যবহার করতে পারেন, যা উপাদানগুলোকে অটো-র্যাপিং করবে।

উদাহরণ: Flexbox Wrap

<div class="columns is-flex-wrap-wrap">
  <div class="column is-one-quarter">
    <p class="box">Column 1</p>
  </div>
  <div class="column is-one-quarter">
    <p class="box">Column 2</p>
  </div>
  <div class="column is-one-quarter">
    <p class="box">Column 3</p>
  </div>
  <div class="column is-one-quarter">
    <p class="box">Column 4</p>
  </div>
</div>

এখানে:

• is-flex-wrap-wrap ক্লাসটি উপাদানগুলোকে ওয়াইড স্ক্রীনে পাশাপাশি এবং ছোট স্ক্রীনে একে অপরের নিচে সাজাবে।

সারাংশ

Bulma ফ্রেমওয়ার্কে Flexbox Alignment এবং Justification ব্যবহার করে আপনি খুব সহজে কনটেন্টের পজিশন, আকার এবং স্থান নিয়ন্ত্রণ করতে পারবেন। Alignment আপনার উপাদানগুলোকে কন্টেইনারের মধ্যে সঠিকভাবে সাজাতে সাহায্য করে, যেমন সেন্টার, টপ বা বটমে। Justification উপাদানগুলোর মধ্যে স্থানকে সমানভাবে বিতরণ করতে ব্যবহৃত হয়। Bulma এর Flexbox ভিত্তিক ক্লাস সিস্টেম এই কাজগুলো খুবই সহজ এবং কার্যকরীভাবে করতে সাহায্য করে, যা রেসপনসিভ ডিজাইনে অত্যন্ত কার্যকরী।