`flex` শর্টহ্যান্ড প্রোপার্টি (`flex-grow`, `flex-shrink`, `flex-basis`) ব্যবহার করে ফ্লেক্স আইটেমের আকার ও আচরণ নিয়ন্ত্রণ করা যায়।
উদাহরণ: Flex ডাইমেনশন কন্ট্রোল
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.container { display: flex; width: 100%; }
div { width: 200px; height: 200px; color: white; text-align: center; font-size: 30px; }
.first { background-color: rgb(55, 0, 255); flex: 2 1 auto; }
.second { background-color: red; }
.third { background-color: rgb(140, 0, 255); }
</style>
</head>
<body>
<h1>ফ্লেক্স আইটেম ডাইমেনশন কন্ট্রোল</h1>
<div class="container">
<div class="first">প্রথম ডিভ</div>
<div class="second">দ্বিতীয় ডিভ</div>
<div class="third">তৃতীয় ডিভ</div>
</div>
</body>
</html>
কোড ব্যাখ্যা
- flex: 2 1 auto (first): grow=2, shrink=1, basis=auto। إضافی স্পেসের ডাবল অংশ নেবে।
- দ্বিতীয় ও তৃতীয় ডিভ: ডিফল্ট `flex: 0 1 auto` (grow=0, shrink=1)।
- ফলাফল: প্রথম ডিভ অন্যদের চেয়ে বড় হবে।
flex প্রোপার্টি ভাঙন
- flex-grow: إضافی স্পেস বিতরণের অনুপাত।
- flex-shrink: স্পেস কম হলে কতটুকু ছোট হবে।
- flex-basis: প্রাথমিক আকার (auto / px / % / 0)।
সাধারণ মান
`flex: 1` = `1 1 0%` (সমান বিতরণ)। `flex: auto` = `1 1 auto`। `flex: initial` = `0 1 auto`।
