Fabrice Pigou

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.