Flexbox en CSS : le système d'alignement qui a mis fin aux hacks de mise en page

Aligner des éléments côte à côte, les centrer verticalement ou répartir l'espace entre eux : ces besoins de mise en page reviennent sur presque toutes les interfaces, une barre de navigation, une liste de cartes, un formulaire. Pendant longtemps, il fallait combiner des flottants et des calculs de marge approximatifs pour les obtenir. Flexbox a été conçu pour résoudre précisément ce type d'agencement.

On le rencontre partout où des éléments doivent se répartir en ligne ou en colonne de façon prévisible, sans connaître à l'avance la taille exacte de chacun. Comprendre Flexbox revient à comprendre deux axes et une poignée de propriétés qui s'appliquent à eux : le reste suit assez naturellement.

Définition

Flexbox, abréviation de Flexible Box Layout, est un système de mise en page CSS pensé pour distribuer l'espace entre les éléments d'un conteneur, dans une seule direction à la fois : en ligne, ou en colonne. On l'active en donnant la valeur flex à la propriété display d'un élément. Celui-ci devient alors un conteneur flexible, et tous ses enfants directs deviennent automatiquement des éléments flexibles, sans qu'il soit nécessaire de leur ajouter la moindre classe.

.conteneur {
  display: flex;
}

Cette seule ligne change déjà le comportement des enfants : ils passent d'un empilement vertical par défaut à un alignement en ligne, côte à côte, sur toute la largeur disponible du conteneur.

Deux axes, pas quatre côtés

Toute la logique de Flexbox repose sur deux axes qui se redéfinissent selon la direction choisie, plutôt que sur les quatre côtés fixes (haut, bas, gauche, droite) utilisés ailleurs en CSS. L'axe principal est celui dans lequel les éléments s'alignent naturellement : par défaut, une ligne horizontale, de gauche à droite. L'axe secondaire lui est perpendiculaire.

Ce qui déroute la première fois, c'est que ces deux axes ne sont pas figés : la propriété flex-direction peut faire pivoter l'axe principal de l'horizontale vers la verticale, et dans ce cas, justify-content et align-items échangent leur rôle sans que leur écriture change d'un caractère.

Un exemple concret

Une barre de navigation classique illustre bien l'intérêt de Flexbox : un logo à gauche, des liens à droite, le tout centré verticalement, sans une seule marge calculée à la main.

.barre-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

Quatre lignes suffisent : la première active Flexbox, la deuxième pousse le logo et les liens vers les bords opposés, la troisième centre tout le contenu verticalement quelle que soit la hauteur réelle du logo ou du menu, la dernière ajoute simplement de l'air autour.

Ce que Flexbox ne fait pas

Flexbox raisonne en une seule dimension à la fois, une ligne ou une colonne. Dès qu'une mise en page doit contrôler simultanément les lignes et les colonnes, comme une grille de produits à deux dimensions, un système de grille devient l'outil plus adapté. Les deux se complètent bien plus qu'ils ne s'opposent : Flexbox pour aligner le contenu d'une barre ou d'une carte, une grille pour structurer la page entière autour de zones fixes.

Les propriétés à connaître

Une fois display: flex posé, tout se joue dans une poignée de propriétés complémentaires, chacune responsable d'un aspect précis de l'agencement.

• flex-direction choisit le sens de l'axe principal, en ligne ou en colonne
• justify-content répartit l'espace disponible sur l'axe principal
• align-items aligne les éléments sur l'axe secondaire
• flex-wrap autorise le retour à la ligne quand la place manque
• gap espace les éléments sans avoir à poser une seule marge

Le piège du départ

L'erreur la plus fréquente consiste à poser display: flex sur un conteneur, puis à être surpris que les éléments débordent ou s'écrasent sur un petit écran. Par défaut, Flexbox ne fait jamais passer les éléments à la ligne : ils se compriment tous sur une seule ligne, aussi étroite soit-elle. Notre formation HTML et CSS fait tester ce débordement sur mobile avant d'ajouter flex-wrap, pour que la nécessité de cette ligne saute aux yeux plutôt que d'être apprise par cœur.

Questions fréquentes

Non, cela dépend du nombre de dimensions à contrôler. Flexbox convient parfaitement à un alignement en une dimension, comme une barre d'outils ou une liste de boutons. Dès que la mise en page doit aligner du contenu à la fois en lignes et en colonnes, comme une grille de photos, un système de grille dédié devient plus simple à écrire et à maintenir.

Parce que la propriété d'alignement sur l'axe secondaire vaut stretch par défaut, ce qui devrait justement les étirer. Le blocage vient presque toujours d'ailleurs : un élément flex avec une hauteur fixée explicitement en CSS ignore ce comportement, ou bien le conteneur lui-même n'a pas de hauteur définie, auquel cas il n'y a rien à étirer vers.

Non, seuls les enfants directs du conteneur deviennent des éléments flexibles. Les enfants de ces enfants gardent leur comportement d'affichage habituel, à moins de leur appliquer eux aussi display: flex sur leur propre conteneur. Cette portée limitée aux enfants directs évite qu'un changement se propage sans contrôle dans toute une arborescence.