Mise en page avec Flex

Flexbox est une nouvelle propriété CSS qui nous permet de gérer simplement la mise en page d’une série d’éléments au sein d’un élément parent et plus précisément de :

• Mettre en place plusieurs éléments sur une ligne sans avoir à se soucier de la largeur de chacun d’eux.
• Modifier rapidement le sens de lecture vertical/horizontal.
• Aligner les éléments à gauche, à droite ou au centre du parent.
• Modifier l’ordre d’affichage des différents éléments.
• Déployer les éléments dans le parent sans problème pour gérer les marges ou la taille des éléments.

Les flexbox utilisent un principe d’axes. Si on veux des éléments alignés verticalement, on utilise une colonne (column), pour des éléments horizontaux (par défaut) on utilise une ligne (row)

.flexcontainer { display: flex; flex-flow: column; /* ou */ flex-flow: row; /* flex-flow peut aussi s'écrire flex-direction */ }

Nous avons la possibilité de placer précisément les éléments dans notre flexbox, c’est ici que le principe d’axe vertical et horizontal prend son importance.
Pour aligner les éléments à partir du début du main-axis, nous ajouterons la propriété justify-content: flex-start.

• justify-content : main-axis
• align-items : cross-axis

.flexcontainer { flex-flow: column; justify-content: center; }

Il est aussi possible de mettre des marges entre nos éléments, afin de remplir un espace donné ou simplement de séparer différents éléments.
Pour cela nous utilisons à nouveau la propriété justify-content avec pour argument space-around.
Les éléments de notre .flexcontainer seront séparés d’une marge identique, et d’une demi-marge sur les cotés. L’argument space-between aura le même effet sans les marges exterieures aux éléments.