CSS Flexbox বাংলা টিউটোরিয়াল — সম্পূর্ণ গাইড

Flexbox ছাড়া মডার্ন ওয়েব অসম্ভব

CSS-এর সবচেয়ে কঠিন কাজ হলো লেআউট। Flexbox এই সমস্যা সলভ করে দেয়।

ধাপ ১: Container-এ display: flex দিন

.container { display: flex; gap: 16px; }
/* ব্যস! সব child এখন পাশাপাশি */

ধাপ ২: justify-content দিয়ে অ্যালাইন করুন

justify-content: center;
justify-content: space-between;
justify-content: space-around;

ধাপ ৩: align-items দিয়ে ভার্টিক্যাল অ্যালাইন

align-items: center;
align-items: flex-start;
align-items: stretch;

ধাপ ৪: রেসপনসিভ কার্ড গ্রিড তৈরি করুন

.grid { display: flex; flex-wrap: wrap; gap: 20px; }
.card {
  flex: 1 1 300px;
  background: #1a1a1e; padding: 24px; border-radius: 12px;
}

ক্রিয়েটিভ টিপ: পারফেক্ট সেন্টারিং

.center {
  display: flex; justify-content: center; align-items: center;
  min-height: 100vh;
}