Toutes les propriétés flexbox courantes, regroupées selon leur portée : le conteneur et l'élément. Chaque ligne associe la propriété à ses valeurs courantes et à ce qu'elle fait.
Flexbox dispose les éléments sur une seule dimension : une ligne ou une colonne. Définissez display: flex sur le parent et il devient le conteneur flex ; ses enfants directs deviennent des éléments flex. Les propriétés du conteneur contrôlent la répartition le long de l'axe principal et de l'axe secondaire ; les propriétés de l'élément contrôlent comment un élément individuel grandit, rétrécit ou s'aligne. Choisissez flexbox pour les barres, les rangées et le centrage unidimensionnels.
Tableau de référence · 13 entrées
CSS FlexboxExplained
13 of 13 rows
Conteneur
flex | inline-flex
Transforme l'élément en conteneur flex.
row | column | row-reverse | column-reverse
Définit l'axe principal le long duquel les éléments s'écoulent.
flex-start | center | space-between | space-around | space-evenly
Répartit les éléments le long de l'axe principal.
stretch | center | flex-start | flex-end | baseline
Aligne les éléments le long de l'axe secondaire.
flex-start | center | stretch | space-between
Aligne les lignes enroulées quand il reste de l'espace sur l'axe secondaire.
nowrap | wrap | wrap-reverse
Laisse les éléments passer à la ligne au lieu de rétrécir.
0.5rem | 8px 16px
Espace entre les éléments, horizontalement et verticalement.
Élément
0 | 1 | 2
La part d'espace libre que l'élément absorbe par rapport à ses voisins.
0 | 1
Le degré de rétrécissement de l'élément quand l'espace manque.
auto | 200px | 50%
La taille de départ avant le partage de l'espace libre.
1 | 1 0 auto | 0 0 200px
Raccourci de grow shrink basis.
auto | center | flex-start | flex-end | stretch
Remplace l'align-items du conteneur pour un seul élément.