Sans flexbox

Par défaut...

...les éléments en display block sont alignés les uns en dessous des autres:

flexbox_utilité_1.png

...les éléments en display inline sont alignés les uns à côté des autres:

flexbox_utilité_2.png

Avec flexbox

Avec flexbox, il est possible...

...d'aligner des éléments sur l'axe des X et sur l'axe des Y:

flexbox_utilité_3.png

...de choisir la direction des éléments:

flexbox_utilité_4.png

…de gérer l'espacement entre les éléments:

flexbox_utilité_5.png

<aside> 📖 Pour un aperçu plus complet des différentes fonctionnalités de flexbox, vous pouvez consulter le très bon guide de CSS-TRICKS.

</aside>

<aside> ➡️ Fonctionnement

</aside>