Les propriétés liées au conteneur
display
Le display flex est donné au conteneur et il permet de rendre tous les items flexibles.
#container { display: flex | inline-flex; }
flex-direction
Par défaut les items se retrouvent les uns à côté des autres, et ils ont pour largeur ce qu'ils contiennent.
#container { flex-direction: row | row-reverse | column | column-reverse; }
- row : (Par défaut) Les items sont alignés en ligne de gauche à droite.
- row-reverse : Les items sont alignés en ligne inversée de droite à gauche.
- column : Les items sont empilés l'un sur l'autre de haut en bas.
- column-reverse : Les items sont empilés l'un sur l'autre de manière inversée de bas en haut.
flex-wrap
Par défaut les items ne reviennent pas à la ligne.
#container { flex-wrap: nowrap | wrap | wrap-reverse; }
- nowrap : (Par défaut) Les items ne reviennent pas à la ligne.
- row-reverse : Les items reviennent à la ligne.
- wrap-reverse : Les items reviennent à la ligne de manière inversée.
flex-flow
Propriété générique réunissant flex-direction et flex-wrap.
#container { flex-flow: column wrap; }
justify-content
Aligne les items suivant l'axe principal.
#container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; }
- flex-start : (Par défaut) Les items démarrent au début de l'axe principal.
- flex-end : Les items démarrent à la fin de l'axe principal.
- center : Les items sont centrés sur l'axe principal.
- space-between : Les items sont alignés de gauche à droite et ils sont calés au début et la fin de l'axe principal. Les items du milieu sont espacés d'une distance équivalente.
- space-around : Les items sont alignés de gauche à droite et ils sont calés au début et la fin de l'axe principal d'une distance correspond à la moitié de la valeur de la distance qui sépare les items du milieu. Les items du milieu sont espacés d'une distance équivalente.
- space-evenly : Les items sont alignés de gauche à droite et ils sont calés au début et la fin de l'axe principal d'une distance correspond à la valeur de la distance qui sépare les items du milieu. Les items du milieu sont espacés d'une distance équivalente.
align-items
Aligne les items suivant l'axe secondaire.
#container { align-items: stretch | flex-start | flex-end | center | baseline; }
- stretch : (Par défaut) Les items occupent toute la largeur qui leur est alouée.
- flex-start : Les items démarrent au début de l'axe secondaire.
- flex-end : Les items démarrent à la fin de l'axe secondaire.
- center : Les items sont centrés sur l'axe secondaire.
- baseline : Les items sont alignés suivant leur première ligne de base.
align-content
Ne fonctionne que s'il y a plusieurs lignes ou plusieurs colonnes.
#container { align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly; }
- stretch : (Par défaut) Les items occupent toute la largeur qui leur est alouée.
- flex-start : Les items démarrent au début de l'axe secondaire.
- flex-end : Les items démarrent à la fin de l'axe secondaire.
- center : Les items sont centrés sur l'axe secondaire.
- space-between : Les items sont alignés de gauche à droite et ils sont calés au début et la fin de l'axe secondaire. Les items du milieu sont espacés d'une distance équivalente.
- space-around : Les items sont alignés de gauche à droite et ils sont calés au début et la fin de l'axe secondaire d'une distance correspond à la moitié de la valeur de la distance qui sépare les items du milieu. Les items du milieu sont espacés d'une distance équivalente.
- space-evenly : Les items sont alignés de gauche à droite et ils sont calés au début et la fin de l'axe secondaire d'une distance correspond à la valeur de la distance qui sépare les items du milieu. Les items du milieu sont espacés d'une distance équivalente.
Les propriétés liées aux contenus
align-self
Permet d'aligner un item particulier. Propriété prioritaire.
.item { align-self: stretch | flex-start | flex-end | center | baseline; }
- stretch : (Par défaut) L'item occupe toute la largeur qui lui est alouée.
- flex-start : L'item démarre au début de l'axe secondaire.
- flex-end : L'item démarre à la fin de l'axe secondaire.
- center : L'item est centré sur l'axe secondaire.
- baseline : L'item est aligné suivant sa première ligne de base.
order
Permet d'ordonner l'affichage des items. La valeur par défaut est 0.
.item { order: 1; }
flex-grow
Permet de définir la largeur d'un item. La valeur par défaut est 0.
.item { flex-grow: 1; }
flex-shrink
Permet de diminuer la largeur d'un item. La valeur par défaut est 1.
.item { flex-shrink: 0; }
flex-basis
Permet de faire varier la largeur ou non d'un item. La valeur par défaut est auto.
.item { flex-basis: 0; }
flex
La propriété flex est en fait une super-propriété qui combine flex-grow (capacité à grossir), flex-shrink (capacité à maigrir) et flex-basis (taille par défaut).
.item { flex: 0 1 auto; }