Comment fonctionnent flex-grow, flex-shrink et flex-basis ?

Question

Accepted Answer

Ces trois propriétés sur les **flex items** contrôlent comment ils partagent l'espace selon l'axe principal. Le raccourci `flex` les combine.

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

## Chaque propriété expliquée

- **`flex-basis`** — la taille idéale/initiale de l'élément selon l'axe principal (comme `width` pour une ligne). `auto` utilise la taille du contenu.
- **`flex-grow`** — s'il y a de l'*espace supplémentaire*, avec quelle avidité cet élément se dilate. `0` = ne pas croître ; les nombres plus élevés croissent proportionnellement.
- **`flex-shrink`** — s'il n'y a *pas assez* d'espace, avec quelle facilité cet élément rétrécit. `0` = ne jamais rétrécir (peut causer un débordement) ; valeur par défaut `1` = rétrécir selon les besoins.

## Croissance proportionnelle

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

L'espace supplémentaire est divisé dans le rapport des valeurs de croissance, pas des tailles absolues.

## Valeurs de raccourci courantes

```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` sur chaque élément crée des colonnes égales ; `flex: 0 0 250px` crée un panneau rigide de largeur fixe à côté d'un flexible.

## Une vraie mise en page : barre latérale fixe + contenu fluide

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

## Pourquoi c'est important

Ces propriétés contrôlent le dimensionnement proportionnel dans les mises en page flexibles — colonnes égales (`flex: 1`), panneaux fixes-plus-fluides (`flex: 0 0 X` + `flex: 1`), et prévention du rétrécissement involontaire (`flex-shrink: 0`).

Comprendre basis/grow/shrink transforme Flexbox de « les éléments restent juste là » en un contrôle précis et réactif.