Flexbox কি?

 

✅ Flexbox কি?

Flexbox (Flexible Box) হল একটি CSS Layout মেথড যা দিয়ে:

• সহজে এলিমেন্টগুলো আড়াআড়ি (row) বা উলম্ব (column) ভাবে সাজানো যায়

• কেন্দ্রে রাখা, স্পেস ভাগ করা, এবং রেসপন্সিভ ডিজাইন তৈরি করা যায় খুব সহজে

---

🎯 Flexbox চালু করতে হয় display: flex দিয়ে:

🔸 উদাহরণ ১: Horizontal Layout (Row)

<style>
  .container {
    display: flex;
    gap: 20px;
  }

  .box {
    background: tomato;
    padding: 20px;
    color: white;
  }
</style>

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

👉 সব box এখন একটি লাইনে পাশে পাশে বসে যাবে

---

✅ গুরুত্বপূর্ণ Flexbox প্রপার্টিগুলো

🔹 1. justify-content → প্রধান অক্ষ বরাবর সাজায় (horizontal)

মান	ব্যাখ্যা
flex-start	বাম দিকে
flex-end	ডান দিকে
center	মাঝখানে
space-between	দুই পাশে স্পেস
space-around	চারপাশে সমান স্পেস

.container {
  display: flex;
  justify-content: center;
}

---

🔹 2. align-items → উপরের-নিচে সাজায় (vertical center)

.container {
  display: flex;
  align-items: center;
}

---

🔹 3. flex-direction → দিক পরিবর্তন করে

.container {
  display: flex;
  flex-direction: column;
}

👉 এখন সব বক্স উলম্বভাবে (column) বসবে

---

✅ উদাহরণ ২: কেন্দ্রে একটি বক্স রাখা

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .box {
    background: teal;
    padding: 40px;
    color: white;
    font-size: 24px;
  }
</style>

<div class="container">
  <div class="box">আমি মাঝখানে!</div>
</div>