flex-grow، flex-shrink اور flex-basis کیسے کام کرتے ہیں؟

Question

Accepted Answer

یہ تینوں properties **flex items** پر main axis کے ساتھ space کو share کرنے پر کنٹرول کرتی ہیں۔ Shorthand `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 */
```

## ہر property کی تشریح

- **`flex-basis`** — item کا ideal/initial main-axis سائز (row کے لیے `width` جیسے)۔ `auto` content سائز استعمال کرتا ہے۔
- **`flex-grow`** — اگر *اضافی* space ہو تو یہ item کتنی greedily expand ہوتی ہے۔ `0` = بڑھنا نہیں؛ زیادہ نمبر proportionally بڑھتے ہیں۔
- **`flex-shrink`** — اگر *کافی space نہ ہو* تو یہ item کتنی readily shrink ہوتی ہے۔ `0` = کبھی shrink نہ کریں (overflow کا سبب بن سکتا ہے)؛ default `1` = ضرورت کے مطابق shrink کریں۔

## Proportionally بڑھنا

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

اضافی space کو grow values کے ratio میں تقسیم کیا جاتا ہے، مطلق سائز میں نہیں۔

## عام shorthand values

```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` ہر item پر برابر columns بناتا ہے؛ `flex: 0 0 250px` ایک rigid fixed-width panel بناتا ہے جو flexible کے ساتھ ہو۔

## ایک حقیقی layout: fixed sidebar + fluid content

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

## یہ کیوں اہم ہے

یہ properties flex layouts میں proportional sizing کو کنٹرول کرنے کا طریقہ ہیں — برابر columns (`flex: 1`)، fixed-plus-fluid panels (`flex: 0 0 X` + `flex: 1`)، اور unwanted shrinking سے بچاؤ (`flex-shrink: 0`)۔

Basis/grow/shrink کو سمجھنا Flexbox کو "items بس وہیں بیٹھے ہوں" سے precise، responsive کنٹرول میں بدل دیتا ہے۔