Flex Box
En action !
display: flex;
Distribution et axe principal
flex-direction:
row; distribution horizontale, valeur par défaut
row-reverse; distribution horizontale inversée
column; distribution verticale
column-reverse; distribution verticale inversée
flex-wrap:
nowrap; les éléments ne passent pas à la ligne, valeur par défaut
wrap; les éléments passent à la ligne dans le sens de lecture
wrap-reverse; les éléments passent à la ligne dans le sens inverse
A noter qu'il existe une propriété raccourcie flex-flow qui regroupe flex-direction et flex-wrap.
flex-flow: row wrap;
Alignements
Axe principal
justify-content:
flex-start; éléments positionnés au début du sens de lecture, valeur par défaut
flex-end; éléments positionnés à la fin
center; position centrale
space-between; répartition des espaces entre les éléments
space-around; répartition des espaces autour les éléments
Axe secondaire
align-items:
flex-start; au début
flex-end; à la fin
center; au centre
baseline; généralement identique à flex-start
stretch; étirés dans l'espace disponible, valeur par défaut
La propriété align-self , permet de distinguer l'alignement d'un "flex-item" de ses frères.
align-self:
Les valeurs de cette propriété sont identiques à celles de align-items.