Maîtriser Flexbox pour vos mises en page

Jusqu’ici, vos éléments s’empilent les uns sous les autres : c’est le comportement par défaut des blocs en HTML. Mais un vrai site aligne des choses côte à côte — un logo à gauche et un menu à droite, une rangée de cartes, un bouton centré dans sa barre. Pendant quinze ans, les développeurs ont bricolé ces alignements avec des float et des hacks fragiles. Puis Flexbox est arrivé et a tout simplifié. Dans cette leçon, vous allez transformer le menu vertical de la Médiathèque Horizon en une vraie barre de navigation horizontale, puis aligner ses cartes d’ouvrages en une rangée souple — et vous comprendrez enfin la logique des axes qui gouverne Flexbox.

🎯 Ce que vous allez apprendre

• Activer un conteneur flex et comprendre la relation conteneur / éléments flex.
• Raisonner en termes d’axe principal et d’axe secondaire — la clé de tout Flexbox.
• Aligner et distribuer avec justify-content et align-items.
• Gérer le retour à la ligne avec flex-wrap et l’espacement avec gap.
• Maîtriser flex-grow, flex-shrink et la propriété raccourcie flex pour répartir l’espace.

🛠️ Ce que vous allez construire

Deux choses concrètes : la barre de navigation de la médiathèque, avec le nom de l’établissement épinglé à gauche et les liens groupés à droite, parfaitement alignés verticalement ; et une rangée de cartes d’ouvrages qui se répartissent l’espace équitablement et passent à la ligne d’elles-mêmes quand l’écran rétrécit. Le tout sans une seule position absolue ni un seul float.

Prérequis

• La page de la médiathèque avec ses cartes stylées (leçon précédente).
• Comprendre les sélecteurs de classe et le modèle de boîte.
• ⏱️ Temps estimé : environ 50 minutes.

Étape 1 — Activer Flexbox : le conteneur et ses éléments

Flexbox fonctionne en deux niveaux. On déclare display: flex sur un élément parent : il devient un conteneur flex. Tous ses enfants directs deviennent automatiquement des éléments flex et s’alignent, par défaut, sur une ligne horizontale. C’est tout ce qu’il faut pour commencer.

Prenons le <nav> de l’en-tête, dont les liens s’empilent actuellement. Une seule déclaration les met en ligne :

nav {
  display: flex;
  gap: 24px;
}

Rechargez : les liens « Accueil », « Catalogue », « Adhésion » s’alignent horizontalement, séparés de 24 pixels grâce à gap. Cette propriété gap est la façon moderne et propre d’espacer des éléments flex — elle remplace avantageusement les marges bricolées sur chaque enfant. Vous venez de créer votre premier conteneur flex. Tout le reste n’est qu’affaire de réglages d’alignement.

Étape 2 — Le concept clé : axe principal et axe secondaire

Voici l’idée qui débloque tout Flexbox. Un conteneur flex possède deux axes perpendiculaires. L’axe principal est la direction dans laquelle les éléments se rangent ; l’axe secondaire lui est perpendiculaire. La propriété flex-direction décide de l’orientation de l’axe principal :

• flex-direction: row (valeur par défaut) — axe principal horizontal, les éléments vont de gauche à droite.
• flex-direction: column — axe principal vertical, les éléments s’empilent.
• row-reverse / column-reverse — même chose, sens inversé.

Pourquoi est-ce capital ? Parce que les deux propriétés d’alignement que vous allez utiliser sans cesse — justify-content et align-items — travaillent l’une sur l’axe principal, l’autre sur l’axe secondaire. Si vous confondez les axes, vous appliquerez la bonne propriété au mauvais endroit et rien ne bougera comme prévu. Retenez la règle simple : justify-content aligne le long de l’axe principal ; align-items aligne le long de l’axe secondaire.

Étape 3 — Distribuer sur l’axe principal avec justify-content

La propriété justify-content répartit les éléments le long de l’axe principal. Ses valeurs les plus utiles :

• flex-start (défaut) — collés au début.
• flex-end — collés à la fin.
• center — centrés.
• space-between — premier et dernier aux extrémités, espace égal entre les autres.
• space-around — espace égal autour de chaque élément.
• space-evenly — espace strictement égal partout.

Pour notre barre de navigation, on veut le nom de la médiathèque à gauche et les liens à droite. Le motif space-between sur l’en-tête fait exactement cela : il pousse le premier enfant à une extrémité et le second à l’autre.

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
}

Ici, l’en-tête devient un conteneur flex contenant deux blocs : le titre et le <nav>. space-between les colle aux deux bords opposés. Rechargez : le nom à gauche, le menu à droite, comme sur n’importe quel site professionnel. Vous voyez la puissance : une ligne de CSS pour un alignement qui demandait autrefois des dizaines de lignes de bidouille.

Étape 4 — Aligner sur l’axe secondaire avec align-items

Avez-vous remarqué align-items: center dans la règle précédente ? C’est lui qui centre verticalement le titre et le menu l’un par rapport à l’autre, malgré leurs hauteurs différentes. Sur un axe principal horizontal, l’axe secondaire est vertical : align-items contrôle donc l’alignement haut/bas.

• stretch (défaut) — les éléments s’étirent pour remplir la hauteur du conteneur.
• center — centrés verticalement.
• flex-start / flex-end — alignés en haut / en bas.
• baseline — alignés sur la ligne de base du texte.

Le fameux « centrage vertical », cauchemar historique du CSS, se résume désormais à deux lignes : display: flex; align-items: center;. Et pour centrer un élément parfaitement au milieu d’une boîte, on combine les deux axes : justify-content: center + align-items: center. C’est le centrage absolu, en deux déclarations.

✅ Point d’étape — Votre en-tête affiche le nom à gauche, le menu à droite, et les deux sont centrés verticalement. Réduisez la fenêtre : ils restent alignés. Si le menu passe sous le titre, vérifiez que display: flex est bien sur le header et non ailleurs.

Étape 5 — Le retour à la ligne avec flex-wrap

Par défaut, un conteneur flex tasse tous ses éléments sur une seule ligne, quitte à les comprimer (flex-wrap: nowrap). Pour une rangée de cartes, ce n’est pas souhaitable : sur un petit écran, on préfère qu’elles passent à la ligne. La propriété flex-wrap: wrap autorise ce retour automatique.

Enveloppez vos cartes d’ouvrages dans un conteneur — par exemple la <section> de la sélection — et appliquez :

.selection {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Maintenant, les cartes s’alignent côte à côte et, dès que la largeur manque, les dernières basculent proprement sur une nouvelle ligne, toujours séparées de 16 pixels grâce à gap. C’est le comportement « responsive » de base, obtenu sans la moindre media query. Redimensionnez la fenêtre pour le voir en direct : les cartes se réorganisent toutes seules.

Étape 6 — Répartir l’espace : flex-grow, flex-shrink et flex

Voici le réglage le plus subtil, mais le plus puissant. Chaque élément flex obéit à trois propriétés qui décident de sa taille : flex-grow (capacité à grandir pour occuper l’espace libre), flex-shrink (capacité à rétrécir quand l’espace manque) et flex-basis (sa taille de départ). On les écrit le plus souvent ensemble via le raccourci flex.

La valeur par défaut d’un élément flex est flex: 0 1 auto : il ne grandit pas, peut rétrécir, et part de sa taille naturelle. La déclaration la plus utile en pratique est flex: 1, qui se développe en 1 1 0% : l’élément grandit pour se partager équitablement tout l’espace disponible. Appliquée à toutes les cartes, elle leur donne une largeur identique qui s’adapte :

.carte {
  flex: 1 1 220px;
}

Cette écriture dit : « pars d’une base de 220 px, puis grandis et rétrécis pour te partager l’espace avec les autres ». Résultat : des cartes d’au moins 220 px qui s’étirent harmonieusement pour remplir chaque ligne, et passent à la suivante quand il n’y a plus la place. C’est le motif classique d’une galerie de cartes flexible. Comparez avec flex: 1 (base 0) qui donnerait des colonnes strictement égales, ou flex: none (0 0 auto) qui figerait chaque carte à sa taille naturelle.

✅ Point d’étape — Vos cartes forment une grille souple : largeur minimale respectée, étirement pour combler les lignes, passage à la ligne automatique. Avec l’inspecteur (F12), sélectionnez une carte et modifiez sa valeur flex en direct pour sentir l’effet de chaque chiffre.

Étape 7 — align-self : l’exception à la règle

Parfois, un seul élément doit s’aligner différemment des autres sur l’axe secondaire. La propriété align-self, posée sur l’élément (et non le conteneur), surcharge le align-items du parent pour ce seul enfant. Pratique pour, par exemple, faire descendre un badge « Nouveau » en bas d’une carte alors que les autres sont centrés.

.carte.mise-en-avant {
  align-self: flex-start;
}

Cette carte particulière s’alignera en haut, indépendamment du réglage global. C’est l’illustration d’un principe Flexbox important : le conteneur fixe le comportement par défaut, mais chaque élément peut faire exception pour lui-même. Vous disposez maintenant de tout le vocabulaire pour composer la quasi-totalité des alignements d’une interface.

🐞 Pièges fréquents

✅ Récapitulatif

Flexbox n’a plus de secret pour vous sur ses fondamentaux. Vous activez un conteneur avec display: flex, vous raisonnez en axe principal (piloté par flex-direction) et axe secondaire, vous distribuez avec justify-content et alignez avec align-items, vous laissez les éléments passer à la ligne avec flex-wrap et les espacez avec gap, et vous répartissez l’espace avec le raccourci flex. La médiathèque a désormais une barre de navigation professionnelle et une galerie de cartes souple. Flexbox excelle pour aligner des éléments sur une dimension — une ligne ou une colonne. Pour orchestrer des lignes et des colonnes en même temps, son complément naturel s’appelle Grid, l’objet de la prochaine leçon.

🧾 Aide-mémoire

💪 À vous de jouer

Dans la barre de navigation, gardez le nom à gauche mais épinglez uniquement le dernier lien (« Adhésion ») tout à droite, les autres restant groupés près du titre. Indice : sur un élément flex, margin-left: auto absorbe tout l’espace libre à sa gauche.

nav {
  display: flex;
  gap: 24px;
}
nav a:last-child {
  margin-left: auto;
}

Tutoriels frères

• Le modèle de boîte CSS et les sélecteurs — les bases indispensables avant Flexbox.
• Maîtriser CSS Grid pour vos mises en page — la disposition en deux dimensions.

Pour aller plus loin

• 🔝 Retour au parcours : Apprendre HTML & CSS de zéro
• MDN — Concepts de base de Flexbox
• W3C — CSS Flexible Box Layout (spécification)

FAQ

Flexbox ou Grid : lequel choisir ?
Flexbox excelle pour aligner des éléments sur une dimension (une rangée ou une colonne) et pour répartir un espace entre eux. Grid gère deux dimensions simultanément (lignes et colonnes). Pour une barre de navigation ou une rangée de boutons, Flexbox ; pour une mise en page globale en grille, Grid. Les deux se combinent très bien.

Pourquoi mes éléments ne se centrent-ils pas verticalement ?
Le plus souvent, parce que le conteneur n’a pas de hauteur supérieure à celle des éléments : il n’y a alors aucun espace vertical à répartir. Donnez une hauteur au conteneur (ou un padding) et align-items: center agira.

À quoi sert flex: 1 exactement ?
C’est le raccourci de flex: 1 1 0% : l’élément peut grandir et rétrécir, en partant d’une base nulle. Concrètement, plusieurs éléments en flex: 1 se partagent l’espace en parts strictement égales. C’est la recette des colonnes de largeur identique.

gap fonctionne-t-il partout ?
Oui, la propriété gap dans les conteneurs flex est prise en charge par tous les navigateurs modernes depuis plusieurs années. C’est aujourd’hui la méthode recommandée pour espacer des éléments flex, préférable aux marges individuelles.