Alignement et mise en page avec CSS Flexbox

CSS Flexbox est un puissant module de mise en page CSS conçu pour aligner et répartir des éléments le long d'une seule dimension — une ligne ou une colonne — presque sans effort. Contrairement aux anciennes astuces float et inline-block, Flexbox dispose les éléments le long d'un axe, partage l'espace restant de façon cohérente et résout le centrage vertical en une seule ligne. Dans ce tutoriel, vous apprendrez les propriétés fondamentales de Flexbox avec une syntaxe correcte, des exemples réels et les modèles de mise en page que l'on utilise au quotidien.

Le conteneur flex et la notion d'axe

Tout commence en attribuant display: flex à un élément. Cet élément devient un conteneur flex, et ses enfants directs deviennent des éléments flex. Pour vraiment comprendre Flexbox, il faut saisir ses deux axes :

Axe principal : défini par flex-direction. Avec la valeur par défaut row, il va de gauche à droite.
Axe transversal : perpendiculaire à l'axe principal. Dans une disposition row, il va de haut en bas.

Cette distinction est essentielle : justify-content agit toujours le long de l'axe principal, tandis que align-items agit toujours le long de l'axe transversal. Lorsque vous modifiez flex-direction, la direction de ces deux propriétés s'inverse aussi.

.conteneur {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

Répartir sur l'axe principal : justify-content

justify-content répartit les éléments le long de l'axe principal et gère l'espace entre eux. Les valeurs les plus courantes sont :

flex-start — regroupe les éléments au début (par défaut).
center — centre les éléments.
flex-end — regroupe les éléments à la fin.
space-between — le premier et le dernier élément collent aux bords, l'espace restant est réparti également entre eux.
space-around — un espace égal de chaque côté de chaque élément.
space-evenly — tous les espaces (y compris les bords) sont égaux.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Aligner sur l'axe transversal : align-items et align-self

align-items aligne chaque élément le long de l'axe transversal. stretch (la valeur par défaut) étire les éléments à la hauteur du conteneur, tandis que center les centre verticalement — la solution la plus propre au problème du « centrage vertical » qui a longtemps tracassé les développeurs.

stretch — étire les éléments sur l'axe transversal (par défaut).
flex-start / flex-end — aligne au début ou à la fin.
center — centre sur l'axe transversal.
baseline — aligne les lignes de base du texte.

Pour aligner un seul élément différemment des autres, appliquez align-self à cet élément ; il remplace align-items pour ce seul élément.

.carte {
  align-self: flex-end; /* seul cet élément s'aligne à la fin */
}

Retour à la ligne et espacement : flex-wrap et gap

Par défaut, les éléments flex restent sur une seule ligne et rétrécissent s'ils ne tiennent pas. flex-wrap: wrap permet aux éléments de passer à la ligne suivante — la base des grilles de cartes responsives. Pour espacer les éléments, plus besoin d'astuces avec margin ; la solution moderne est la propriété gap.

.grille-cartes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* espace entre les lignes et les colonnes */
}

gap n'ajoute de l'espace qu'entre les éléments, jamais sur les bords extérieurs, ce qui le rend bien plus prévisible que les anciennes approches basées sur margin.

Flexibilité : flex-grow, flex-shrink, flex-basis et le raccourci flex

La vraie puissance de Flexbox apparaît dans la façon dont il partage l'espace restant entre les éléments. Trois propriétés le contrôlent :

flex-grow — de combien un élément grandit pour remplir l'espace restant (par défaut 0).
flex-shrink — de combien un élément rétrécit quand l'espace manque (par défaut 1).
flex-basis — la taille de départ avant de grandir ou rétrécir (par défaut auto).

Pour écrire les trois sur une seule ligne, utilisez le raccourci flex. Les modèles les plus courants sont :

.element {
  flex: 1; /* flex: 1 1 0 — tous les éléments à largeur égale */
}

.barre-laterale-fixe {
  flex: 0 0 240px; /* ne grandit ni ne rétrécit : colonne fixe de 240px */
}

.contenu-flexible {
  flex: 1 1 300px; /* démarre à 300px, grandit s'il y a de la place, rétrécit si nécessaire */
}

Quand flex: 1 est donné à chaque enfant, ils partagent tous l'espace restant à parts égales — le chemin le plus court vers des colonnes de largeur égale.

Ordonnancement : order

La propriété order permet de réordonner visuellement les éléments sans changer leur ordre dans le HTML. La valeur par défaut est 0 ; les valeurs plus basses avancent vers le début, les plus hautes vers la fin.

.mis-en-avant {
  order: -1; /* passe tout au début, où qu'il soit dans le HTML */
}

Note d'accessibilité : order ne change que le visuel — l'ordre au clavier et pour les lecteurs d'écran suit toujours la source HTML. Évitez donc d'en abuser au point de casser l'ordre de lecture logique.

Un modèle pratique : centrage parfait à l'écran

Centrer un élément à la fois horizontalement et verticalement tient en un seul bloc avec Flexbox :

.centre {
  display: flex;
  justify-content: center; /* axe principal : horizontal */
  align-items: center;     /* axe transversal : vertical */
  min-height: 100vh;
}

Pour une grille de cartes, combiner flex-wrap et flex-basis permet au nombre de colonnes d'augmenter naturellement à mesure que l'écran s'élargit — une grille responsive sans écrire la moindre media query.

Foire aux questions

Faut-il utiliser Flexbox ou Grid ?

La règle générale : utilisez Flexbox pour les mises en page unidimensionnelles (une seule ligne ou colonne, barres de navigation, groupes de boutons, rangées de cartes) et CSS Grid pour les mises en page bidimensionnelles (aligner lignes et colonnes ensemble, gabarits de page). Ce ne sont pas des rivaux mais des compléments ; la plupart des pages les imbriquent.

Comment distinguer justify-content et align-items ?

justify-content agit toujours le long de l'axe principal (horizontal par défaut), tandis que align-items agit toujours le long de l'axe transversal (vertical par défaut). Avec flex-direction: column, ces directions s'inversent, car l'axe principal devient vertical.

Comment espacer les éléments ?

Dans les navigateurs modernes, la méthode la plus propre est la propriété gap. Au lieu d'astuces avec margin, donnez au conteneur gap: 1rem ; il espace uniquement les éléments et garde les bords extérieurs nets.

Vous voulez résoudre vos problèmes de mise en page une bonne fois pour toutes ? Construisons ensemble une interface rapide et responsive qui combine Flexbox et Grid comme il faut. Contactez-moi et parlons de votre projet.