Aide-mémoire CSS Flexbox : propriétés et valeurs
Flexbox dispose les items dans une dimension — une ligne ou une colonne — et répartit l'espace entre eux. Les propriétés se divisent en deux groupes : celles que vous définissez sur le conteneur (le parent flex) et celles sur les items (ses enfants).
Le modèle mental : flex-direction définit l'axe principal ; justify-content aligne le long de celui-ci, et align-items aligne le long de l'axe transversal perpendiculaire.
Mis à jour 2026-07-06
Propriétés du conteneur (le parent flex)
| Propriété | Valeurs | Ce qu'elle fait |
|---|---|---|
| display | flex | inline-flex | Transformer un élément en conteneur flex |
| flex-direction | row | row-reverse | column | column-reverse | Direction de l'axe principal |
| flex-wrap | nowrap | wrap | wrap-reverse | Si les items passent à la ligne |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | Alignement le long de l'axe principal |
| align-items | stretch | flex-start | center | flex-end | baseline | Alignement le long de l'axe transversal |
| align-content | flex-start | center | space-between | stretch | Aligne les lignes retournées (multi-lignes) |
| gap | <length> (e.g. 16px) | Espace entre les items |
Propriétés des items (les enfants)
| Propriété | Valeurs | Ce qu'elle fait |
|---|---|---|
| flex-grow | 0 | <number> | Combien un item grandit pour remplir l'espace |
| flex-shrink | 1 | <number> | Combien un item rétrécit quand l'espace manque |
| flex-basis | auto | <length> | La taille de départ de l'item avant grow/shrink |
| flex | e.g. 1 1 0 | 1 | auto | Raccourci pour grow, shrink et basis |
| align-self | auto | center | flex-start | flex-end | stretch | Remplacer align-items pour un item |
| order | 0 | <integer> | Réordonner un item visuellement (le plus petit d'abord) |
L'astuce de centrage la plus courante : sur le conteneur, mettez display: flex; justify-content: center; align-items: center; pour centrer un enfant à la fois horizontalement et verticalement. Pour les unités de taille utilisées dans ces valeurs, voyez la référence des unités CSS.