En css
{
display: flex; (Placer les blocs côte à côte, ligne)
flex-direction: column; (en colonnes)
row; (par défaut, ligne)
row-reverse; (ordre inverse)
column-reverse; (ordre inverse)
flex-wrap: wrap; (passe à la ligne, aussi pour les colonnes)
no-wrap; (annule)
wrap-reverse; (en inversant)
Aligner sur l’axe principal :
justify-content: flex-start; (au début)
flex-end; (à la fin)
center; (au centre)
space-between; ( les éléments sont étirés sur tout l’axe, il y a de l’espace entre eux)
space-around; (les éléments sont étirés sur tout l’axe, mais ils laissent aussi de l’espace sur les extrémités)
Aligner sur l’axe secondaire :
align-items: stretch; ( les éléments sont étirés sur tout l’axe (valeur par défaut))
flex-start; (alignés au début)
flex-end; (alignés à la fin)
center; (alignés au centre)
baseline; (alignés sur la ligne de base (semblable à flex-start))
Il est possible de faire une exception pour un seul des éléments sur l’axe secondaire avec :
align-self: flex-end; (aligne le seul élément à la fin)
flex-start; (aligne le seul élément au début)
Répartir plusieurs lignes :
align-content: flex-start; (les éléments sont placés au début)
flex-end; (les éléments sont placés à la fin)
center; (les éléments sont placés au centre)
space-between; (les éléments sont séparés avec de l’espace entre eux)
space-around; (idem, mais il y a aussi de l’espace au début et à la fin)
stretch; ((par défaut) les éléments s’étirent pour occuper tout l’espace)
Changer l’ordre d’un élément :
order: 3; (place l’élément en 3eme position)
Faire grossir ou maigrir les éléments :
flex: 1; (l’élément occupe tout l’espace restant)
flex: 2; (l’élément peut grossir deux fois plus que le premier)
Donner la largeur de l’élément :
flex-basis: 100px;
calc(100% – 25% -10px);
Capacité à grossir :
flex-grow : 0; (ne grossit pas)
1; (autorise à se déformer)
2; (autorise à se déformer 2 fois plus)
Capacité à maigrir :
flex-shrink: 0; (ne maigrit pas)
1; (autorise à maigrir)
2; (autorise à maigrir 2 fois plus)
}