Come funzionano flex-grow, flex-shrink e flex-basis?

Question

Accepted Answer

Queste tre proprietà su **flex items** controllano come condividono lo spazio lungo l'asse principale. La scorciatoia `flex` le combina.

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

## Ogni proprietà spiegata

- **`flex-basis`** — la dimensione ideale/iniziale dell'elemento lungo l'asse principale (come `width` per una riga). `auto` usa la dimensione del contenuto.
- **`flex-grow`** — se c'è spazio *in più*, quanto avidamente questo elemento si espande. `0` = non crescere; numeri più alti crescono proporzionalmente.
- **`flex-shrink`** — se non c'è *spazio sufficiente*, quanto prontamente questo elemento si riduce. `0` = non ridursi mai (può causare overflow); default `1` = ridursi secondo necessità.

## Crescere proporzionalmente

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

Lo spazio in più è diviso nel rapporto dei valori di crescita, non delle dimensioni assolute.

## Valori scorciatoia comuni

```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` su ogni elemento crea colonne uguali; `flex: 0 0 250px` crea un pannello rigido a larghezza fissa accanto a uno flessibile.

## Un layout reale: barra laterale fissa + contenuto fluido

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

## Perché è importante

Queste proprietà sono il modo in cui controlli il dimensionamento proporzionale nei layout flex — colonne uguali (`flex: 1`), pannelli fissi-più-fluidi (`flex: 0 0 X` + `flex: 1`), e prevenire la riduzione indesiderata (`flex-shrink: 0`).

Capire basis/grow/shrink trasforma Flexbox da "gli elementi stanno lì" in un controllo preciso e reattivo.