এই অধ্যায়ে শিখবো Flexbox এর আরও উন্নত প্রোপার্টি: flex-grow, flex-shrink, এবং flex-basis। এগুলো দিয়ে আপনি কন্টেইনারের ভিতরে আইটেমগুলো কতটা জায়গা নেবে, কমবে বা থাকবে, সেটি নিয়ন্ত্রণ করতে পারবেন।
১. Flex-grow (বাড়ার ক্ষমতা)
flex-grow নির্ধারণ করে কোন আইটেম কতোটা অতিরিক্ত জায়গা নিতে পারে যখন কন্টেইনারে ফাঁকা জায়গা থাকে।
-
ডিফল্ট মান:
0(অর্থাৎ বাড়ে না) -
বেশি মান = বেশি জায়গা নেয়
উদাহরণ:
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
এখানে .item2 দুইগুণ বেশি জায়গা নিবে .item1 থেকে।
২. Flex-shrink (ছোট হওয়ার ক্ষমতা)
flex-shrink নির্ধারণ করে কোন আইটেম কতটা সংকুচিত হতে পারে যখন কন্টেইনারে জায়গা কম হয়।
-
ডিফল্ট মান:
1(সংকুচিত হতে পারে) -
মান
0হলে সংকুচিত হবে না
৩. Flex-basis (শুরু করার প্রাথমিক সাইজ)
flex-basis দিয়ে আইটেমের প্রাথমিক (base) সাইজ সেট করা হয়, যা থেকে বাড়া বা সংকোচন শুরু হয়।
-
ডিফল্ট:
auto(কন্টেন্ট অনুযায়ী সাইজ) -
px, %, rem দিয়ে নির্দিষ্ট সাইজ দেওয়া যায়
৪. সংক্ষিপ্ত রূপ: flex (shorthand)
একসাথে তিনটি প্রোপার্টি সেট করতে পারেন:
.item {
flex: 1 0 150px; /* flex-grow flex-shrink flex-basis */
}
-
1= grow করবে -
0= shrink করবে না -
150px= বেস সাইজ ১৫০ পিক্সেল
৫. উদাহরণ:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
width: 600px;
border: 2px solid #333;
}
.item1 {
flex: 1 1 100px;
background-color: lightcoral;
padding: 20px;
color: white;
}
.item2 {
flex: 2 1 100px;
background-color: lightseagreen;
padding: 20px;
color: white;
}
.item3 {
flex: 1 0 100px;
background-color: lightblue;
padding: 20px;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">আইটেম ১ (flex-grow:1)</div>
<div class="item2">আইটেম ২ (flex-grow:2)</div>
<div class="item3">আইটেম ৩ (flex-shrink:0)</div>
</div>
</body>
</html>
এই অধ্যায়ের শেষে আপনি শিখলেন:
-
flex-growদিয়ে এলিমেন্ট কতটা বড় হবে -
flex-shrinkদিয়ে সংকোচনের নিয়ন্ত্রণ -
flex-basisদিয়ে বেস সাইজ সেট করা -
flexশর্টহ্যান্ড প্রোপার্টি ব্যবহার
পরবর্তী অধ্যায়:
অধ্যায় ১২: Responsive Design ও Media Queries
লিখুন: “অধ্যায় ১২ শুরু করো” — তাহলে আমরা রেসপন্সিভ ওয়েব ডিজাইন শিখবো।