অধ্যায় ১০: CSS Flexbox পরিচিতি (বাংলায়)

এই অধ্যায়ে শিখবো কীভাবে CSS Flexbox ব্যবহার করে সহজে এবং সুন্দরভাবে ওয়েবপেজের লেআউট (layout) তৈরি করতে হয়।

১. Flexbox কী?

Flexbox হল CSS-এর একটি লেআউট মডেল যা এলিমেন্টগুলোকে একটি কন্টেইনারে সহজে সোজা (align) ও সঠিকভাবে সাজাতে সাহায্য করে।

এই মডেল মূলত one-dimensional layout দেয় — অর্থাৎ, এক দিক (row বা column) বরাবর এলিমেন্ট সাজানো।

২. Flexbox শুরু করার জন্য:

প্রথমে কোন ডিভ বা কন্টেইনারকে flex container বানাতে হবে:

.container {
  display: flex;
}

এখন .container এর সব চাইল্ড এলিমেন্টগুলো হবে flex items।

৩. Flex Direction (অর্থাৎ এলিমেন্টগুলোকে কোন দিক বরাবর সাজানো হবে)

.container {
  display: flex;
  flex-direction: row; /* default, 横 দিক বরাবর */
}

মান	কাজ
`row`	হরাইজন্টাল (বাম থেকে ডান)
`row-reverse`	ডান থেকে বাম
`column`	ভার্টিকাল (টপ থেকে নিচে)
`column-reverse`	নিচ থেকে টপ পর্যন্ত

৪. Justify Content (Main axis এ এলিমেন্টগুলো কিভাবে থাকবে)

.container {
  justify-content: center;
}

মান	কাজ
`flex-start`	শুরুতে জড়ো (default)
`center`	মাঝখানে সারিবদ্ধ
`flex-end`	শেষে জড়ো
`space-between`	দুই পাশ ফাঁকা, মাঝখানে সমান ফাঁকা
`space-around`	চারপাশে সমান ফাঁকা

৫. Align Items (Cross axis এ এলিমেন্ট কেমন থাকবে)

.container {
  align-items: center;
}

মান	কাজ
`stretch`	এলিমেন্ট পুরো উচ্চতায় প্রসারিত (default)
`flex-start`	উপরের দিকে সারিবদ্ধ
`center`	মাঝখানে সারিবদ্ধ
`flex-end`	নিচের দিকে সারিবদ্ধ

৬. উদাহরণ:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 150px;
      background-color: #f0f0f0;
    }
    .item {
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      font-size: 18px;
      border-radius: 5px;
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="item">আইটেম ১</div>
    <div class="item">আইটেম ২</div>
    <div class="item">আইটেম ৩</div>
  </div>

</body>
</html>

৭. সংক্ষিপ্ত বিবরণ:

প্রপার্টি	ব্যবহার
`display: flex;`	flexbox চালু করা
`flex-direction`	এলিমেন্ট কেমন সাজানো হবে
`justify-content`	মূল অক্ষ বরাবর এলিমেন্টের সারিবদ্ধতা
`align-items`	ক্রস অক্ষ বরাবর সারিবদ্ধতা

এই অধ্যায়ের শেষে আপনি শিখলেন:

Flexbox কী এবং কেন ব্যবহার করা হয়
কিভাবে flex container তৈরি করতে হয়
flex-direction, justify-content, align-items প্রোপার্টির কাজ

পরবর্তী অধ্যায়:
অধ্যায় ১১: Flexbox আরও গভীরে — Flex Grow, Shrink, Basis

লিখুন: “অধ্যায় ১১ শুরু করো” — তাহলে flexbox এর আরো advanced অংশ শিখবো।

অধ্যায় ১০: CSS Flexbox পরিচিতি (বাংলায়)