9. CSS Flexbox
📘 কনসেপ্ট (থিওরি)
Flexbox হলো এক দিকে (সারি বা কলাম) আইটেম সাজানোর শক্তিশালী লেআউট সিস্টেম।
**কন্টেইনার প্রপার্টি** (প্যারেন্টে):
-
display: flex — Flexbox সক্রিয় করে
- flex-direction — row, column, row-reverse, column-reverse
- justify-content — মূল অক্ষে সারিবদ্ধকরণ: flex-start, center, flex-end, space-between, space-around, space-evenly
- align-items — ক্রস অক্ষে সারিবদ্ধকরণ: flex-start, center, flex-end, stretch
- flex-wrap — wrap, nowrap
- gap — আইটেমের মধ্যে ফাঁকা
**আইটেম প্রপার্টি** (চিলড্রেনে):
- flex: 1 — উপলব্ধ জায়গা পূরণ করতে বাড়ে
- flex-shrink — কতটুকু সংকুচিত হবে
- order — দৃশ্যমান ক্রম পরিবর্তন
- align-self — একটি আইটেমের জন্য align-items ওভাররাইড💡 উদাহরণ
Flexbox লেআউট:
১
২
৩
🎯 আপনার কাজ (প্র্যাকটিস)
Flexbox ব্যবহার করে বামে লোগো এবং ডানে ৩টি নেভিগেশন লিংকসহ একটি নেভবার তৈরি করুন।
main.css
Loading...
OUTPUT
Run your code to see the output here...