🔖 ফ্লেক্সবক্স (Flexbox)

আগে CSS দিয়ে লেআউট বানানো ছিল একটি দুঃস্বপ্ন! float, clear, position দিয়ে কাজ করতে করতে ডেভেলপারদের ঘাম ছুটে যেত। এরপর এলো Flexbox (Flexible Box Layout)। এটি ওয়েব ডিজাইনের দুনিয়াটাই পাল্টে দিয়েছে! 🚀

📌 ফ্লেক্সবক্সের মূল ধারণা

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

.container {
  display: flex; /* যাদু শুরু! ✨ */
}

📌 ফ্লেক্স কন্টেইনারের প্রপার্টিজ

কন্টেইনারের উপর যে প্রপার্টিগুলো কাজ করে:

.container {
  flex-direction: row; /* ডিফল্ট (পাশাপাশি) */
  /* flex-direction: column; উপর-নিচে */
  /* flex-direction: row-reverse; উল্টো দিক থেকে */
}

.container {
  justify-content: center; /* একদম মাঝখানে */
  /* space-between: দুই প্রান্তে ফাঁকা রেখে */
  /* space-around: সবদিকে সমান ফাঁকা রেখে */
}

.container {
  align-items: center; /* উপর-নিচ থেকে মাঝখানে */
  /* align-items: stretch; ডিফল্ট (পুরো জায়গা নিয়ে নেবে) */
}

📌 🥷 নিঞ্জা টেকনিক: একদম পারফেক্ট সেন্টার!

যেকোনো এলিমেন্টকে (যেমন একটি div বা h1 কে) স্ক্রিনের ঠিক মাঝখানে আনা একসময় অনেক কঠিন ছিল। Flexbox দিয়ে এটি মাত্র ৩ লাইনের ব্যাপার! 🎯

.container {
  display: flex;
  justify-content: center; /* ডানে-বামে সেন্টারিং */
  align-items: center;     /* উপর-নিচে সেন্টারিং */
  height: 100vh;           /* পুরো স্ক্রিনের উচ্চতা */
}

📌 ফ্লেক্স আইটেম প্রপার্টিজ

ভেতরের আইটেমগুলোর উপর যে প্রপার্টিগুলো কাজ করে:

• flex-grow: আইটেমটি কতটুকু জায়গা দখল করে বড় হবে।
• flex-shrink: জায়গা না থাকলে কতটা ছোট হবে।
• flex-basis: আইটেমটির ডিফল্ট সাইজ।

.item-1 {
  flex: 1; /* বাকি থাকা পুরো জায়গা সে একাই নিয়ে নেবে! */
}