display: flex
au conteneur.justify-content
.flex-start
: les éléments s'alignent au côté gauche du conteneur ;flex-end
: les éléments s'alignent au côté droit du conteneur ;center
: les éléments s'alignent au centre du conteneur ;space-between
: les éléments sont séparés d'un même espacement ;space-around
: les éléments sont entourés d'une même marge (deux fois plusspace-evenly
: les espacements sont tous égaux (même espacement entre deux align-items
.flex-start
: Les éléments s'alignent en haut ;flex-end
: les éléments s'alignent en bas ;center
: les éléments s'alignent au centre du conteneur ;baseline
: les éléments s'alignent à la ligne de base du conteneur ;stretch
: les éléments sont étirés verticalement.flex-diection
.row
dans le sens du texte ;row-reverse
dans le sens opposé de celui du texte ;column
: de haut en bas ;column-reverse
: de bas en haut.flex-wrap
.nowrap
: tous les éléments sont écrasés pour tenir sur une ligne ;wrap
: s'il n'y a pas la place en fin de ligne, on passe à la lignewrap-reverse
: idem sauf que la première ligne se situe tout en bas.flex-diection
et flex-wrap
en flex-flow
:flex-flow
vaut row wrap
.align-content
.flex-start
: Les lignes s'alignent en haut ;flex-end
: les lignes s'alignent en bas ;center
: les lignes s'alignent au centre du conteneur ;space-between
: les lignes sont séparées d'un même espacement ;space-around
: les lignes sont entourées d'un même espacement ;stretch
: les lignes s'étirent en hauteur pour remplir l'espace.align-self
.