flex-grow, flex-shrink এবং flex-basis কিভাবে কাজ করে?

Question

Accepted Answer

এই তিনটি বৈশিষ্ট্য **flex আইটেমগুলিতে** প্রধান অক্ষ জুড়ে স্থান কিভাবে ভাগ করা হয় তা নিয়ন্ত্রণ করে। সংক্ষিপ্ত `flex` এগুলিকে একত্রিত করে।

```css
.item { flex: 1 1 200px; }
/*        │ │ └── flex-basis: the starting size BEFORE growing/shrinking */
/*        │ └──── flex-shrink: how much it shrinks when space is tight */
/*        └────── flex-grow: how much it grows to fill extra space */
```

## প্রতিটি বৈশিষ্ট্য ব্যাখ্যা করা হয়েছে

- **`flex-basis`** — আইটেমের আদর্শ/প্রাথমিক প্রধান-অক্ষ আকার (একটি সারির জন্য `width` এর মতো)। `auto` সামগ্রীর আকার ব্যবহার করে।
- **`flex-grow`** — যদি *অতিরিক্ত* স্থান থাকে, এই আইটেমটি কত লোভনীয়ভাবে প্রসারিত হয়। `0` = বৃদ্ধি করবেন না; উচ্চতর সংখ্যা আনুপাতিকভাবে বৃদ্ধি পায়।
- **`flex-shrink`** — যদি *পর্যাপ্ত* স্থান না থাকে, এই আইটেমটি কত সহজে সংকুচিত হয়। `0` = কখনও সংকুচিত করবেন না (ওভারফ্লো ঘটাতে পারে); ডিফল্ট `1` = প্রয়োজন অনুযায়ী সংকুচিত করুন।

## আনুপাতিকভাবে বৃদ্ধি পাচ্ছে

```css
.a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
```

অতিরিক্ত স্থান বৃদ্ধির মানের অনুপাত দ্বারা বিভক্ত হয়, পরম আকার নয়।

## সাধারণ সংক্ষিপ্ত মান

```css
.item { flex: 1; }      /* = 1 1 0  → all items share space EQUALLY (equal widths) */
.item { flex: auto; }   /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; }   /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
```

`flex: 1` প্রতিটি আইটেমে সমান কলাম তৈরি করে; `flex: 0 0 250px` একটি নমনীয় একটির পাশে একটি কঠোর নির্দিষ্ট-প্রস্থ প্যানেল তৈরি করে।

## একটি বাস্তব লেআউট: নির্দিষ্ট সাইডবার + তরল সামগ্রী

```css
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; }          /* takes all remaining space */
```

## কেন এটি গুরুত্বপূর্ণ

এই বৈশিষ্ট্যগুলি হল কিভাবে আপনি flex লেআউটগুলিতে আনুপাতিক আকার নিয়ন্ত্রণ করেন — সমান কলাম (`flex: 1`), নির্দিষ্ট-প্লাস-তরল প্যানেল (`flex: 0 0 X` + `flex: 1`), এবং অবাঞ্ছিত সংকোচন প্রতিরোধ করা (`flex-shrink: 0`)।

ভিত্তি/বৃদ্ধি/সংকোচন বোঝা Flexbox কে "আইটেমগুলি সেখানে বসে আছে" থেকে নির্ভুল, প্রতিক্রিয়াশীল নিয়ন্ত্রণে রূপান্তরিত করে।