flex-grow, flex-shrink ਅਤੇ flex-basis ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

ਇਹ ਤਿੰਨ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ **flex items** ਉੱਤੇ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦੀਆਂ ਹਨ ਕਿ ਉਹ ਮੁੱਖ ਧੁਰੀ ਦੇ ਨਾਲ ਥਾਂ ਕਿਵੇਂ ਸਾਂਝੀ ਕਰਦੇ ਹਨ। `flex` shorthand ਉਨ੍ਹਾਂ ਨੂੰ ਜੋੜਦਾ ਹੈ।

```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` = ਕਦੇ ਨਾ ਸੰਕੁਚਿਤ ਕਰੋ (overflow ਦਾ ਕਾਰਨ ਬਣ ਸਕਦਾ ਹੈ); ਪੂਰਵ-ਨਿਰਧਾਰਿਤ `1` = ਜ਼ਰੂਰਤ ਅਨੁਸਾਰ ਸੰਕੁਚਿਤ ਕਰੋ।

## ਅਨੁਪਾਤੀ ਵਿਸਤਾਰ

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

ਵਾਧੂ ਥਾਂ grow values ਦੇ ਅਨੁਪਾਤ ਵਿੱਚ ਵੰਡੀ ਜਾਂਦੀ ਹੈ, ਨਿਰਪੱਖ ਆਕਾਰ ਵਿੱਚ ਨਹੀਂ।

## ਆਮ shorthand ਮੁੱਲ

```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 layouts ਵਿੱਚ ਅਨੁਪਾਤੀ ਆਕਾਰ ਨੂੰ ਕਿਵੇਂ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦੇ ਹੋ — ਬਰਾਬਰ ਕਾਲਮ (`flex: 1`), ਨਿਸ਼ਚਤ-ਪਲੱਸ-ਤਰਲ ਪੈਨਲ (`flex: 0 0 X` + `flex: 1`), ਅਤੇ ਅਣਚਾਹੇ ਸੰਕੁਚਨ ਤੋਂ ਬਚਾਉ (`flex-shrink: 0`)।

ਆਧਾਰ/ਵਿਸਤਾਰ/ਸੰਕੁਚਨ ਨੂੰ ਸਮਝਣਾ Flexbox ਨੂੰ "ਆਈਟਮ ਸਿਰਫ ਉੱਥੇ ਬੈਠੀਆਂ ਹਨ" ਤੋਂ ਸਟੀਕ, ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਨਿਯੰਤ੍ਰਣ ਵਿੱਚ ਬਦਲਦਾ ਹੈ।