CSS Flexbox মডেল বক্স মডেলকে উন্নত করার জন্য তৈরি হয়েছে। এটি বক্স মডেলের 주요 উপাদানগুলো (margin, padding, border, content) রাখে কিন্তু কন্টেইনারের চাইল্ডগুলোকে ফ্লেক্সিবলভাবে স্পেস বরাবর করতে সাহায্য করে।
স্টার্টার কোড
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
display: flex; /* এটি যোগ করুন */
}
.child-item {
height: 200px;
width: 200px;
margin: 0px;
padding: 20px;
}
পেরেন্ট কন্টেইনার (Flexbox) প্রপার্টিগুলো
display: flex
এটি পেরেন্ট কন্টেইনারে লাগিয়ে চাইল্ডগুলোকে ফ্লেক্স আইটেমে রূপান্তরিত করে। ডিফল্টভাবে চাইল্ডগুলো সাইড-বাই-সাইড থাকে (row)।
flex-direction
মেইন এক্সিস নির্ধারণ করে:
- row (ডিফল্ট): বাম থেকে ডান
- column: উপর থেকে নিচ
- row-reverse: ডান থেকে বাম
- column-reverse: নিচ থেকে উপর
flex-wrap
- nowrap (ডিফল্ট): চাইল্ডগুলো ওভারফ্লো করে
- wrap: নতুন রোতে চলে যায়
- wrap-reverse: নিচ থেকে উপরে wrap হয়
flex-flow
flex-direction এবং flex-wrap-এর শর্টহ্যান্ড: flex-flow: column wrap
justify-content (মেইন এক্সিসে স্পেসিং)
- flex-start (ডিফল্ট): শুরুতে
- flex-end: শেষে
- center: মাঝে
- space-around: চাইল্ডগুলোর চারপাশে সমান স্পেস
- space-between: প্রথম এবং শেষ চাইল্ড এজে, বাকিগুলো মাঝপথে সমান স্পেস
- space-evenly: সব জায়গায় সমান স্পেস
align-items (ক্রস এক্সিসে স্পেসিং)
- stretch (ডিফল্ট): চাইল্ড ক্রস এক্সিসে ফুলে যায়
- center: ক্রস এক্সিসে মাঝে
- flex-start, flex-end, baseline
চাইল্ড কন্টেইনার (Flex-item) প্রপার্টিগুলো
order
চাইল্ডগুলোর ডিসপ্লে অর্ডার পরিবর্তন করে (নাম্বারিক মান)। মোবাইল ডিভাইসে অর্ডার পরিবর্তনের জন্য উপযোগী।
align-self
একটি নির্দিষ্ট চাইল্ডের জন্য align-items ওভাররাইড করে। মান: flex-start, flex-end, center, baseline, stretch।
উপসংহার
Flexbox পেরেন্ট-চাইল্ড সম্পর্কের উপর ভিত্তি করে কাজ করে। পেরেন্টের প্রপার্টিগুলো (flex-direction, justify-content, align-items, flex-wrap) চাইল্ডের পজিশন নিয়ন্ত্রণ করে। চাইল্ডের প্রপার্টিগুলো (order, align-self) নির্দিষ্ট চাইল্ডের আচরণ পরিবর্তন করে। প্র্যাকটিস করে ফ্লেক্সবক্স এক্সপার্ট बनুন!
