Cum funcționează flex-grow, flex-shrink și flex-basis?

Question

Accepted Answer

Aceste trei proprietăți pe **flex items** controlează cum distribuie spațiul de-a lungul axei principale. Prescurtarea `flex` le combină.

```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 */
```

## Fiecare proprietate explicată

- **`flex-basis`** — dimensiunea ideală/inițială a articolului de-a lungul axei principale (cum ar fi `width` pentru o linie). `auto` utilizează dimensiunea conținutului.
- **`flex-grow`** — dacă există spațiu *suplimentar*, cât de lacom se extinde acest articol. `0` = nu crește; numerele mai mari cresc proporțional.
- **`flex-shrink`** — dacă nu există *suficient* spațiu, cât de ușor se contractă acest articol. `0` = nu se contracta niciodată (poate cauza depășire); implicit `1` = contractare după caz.

## Creștere proporțională

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

Spațiul suplimentar este împărțit în raportul valorilor de creștere, nu dimensiuni absolute.

## Valori de prescurtare comune

```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` pe fiecare articol creează coloane egale; `flex: 0 0 250px` creează un panou rigid cu lățime fixă lângă unul flexibil.

## Un layout real: bară laterală fixă + conținut fluid

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

## De ce conteaza

Aceste proprietăți sunt modul în care controlezi dimensionarea proporțională în layouturi flex — coloane egale (`flex: 1`), panouri fixe-plus-fluide (`flex: 0 0 X` + `flex: 1`), și evitarea contracției nedorite (`flex-shrink: 0`).

Înțelegerea basis/grow/shrink transformă Flexbox din "articolele stau doar acolo" în control precis și responsiv.