Flexbox

Qu’est-ce que Flexbox ?

Flexbox est un modèle de mise en page CSS conçu pour faciliter l’alignement, la distribution et l’organisation de l’espace entre les éléments à l’intérieur d’un conteneur. Avant Flexbox, les développeurs s’appuyaient sur les floats, le positionnement et les mises en page basées sur des tableaux pour réaliser des tâches même simples, comme centrer une div ou créer une barre de navigation avec des éléments de largeur égale. Ces approches fonctionnaient, mais elles étaient fragiles et verbeuses. Flexbox les a remplacées pour la plupart par un système propre et prévisible.

L’idée clé est le modèle à deux axes. Chaque conteneur flex possède un axe principal (main axis) et un axe transversal (cross axis). Par défaut, l’axe principal est horizontal et l’axe transversal est vertical, mais vous pouvez les inverser avec flex-direction. Tout dans Flexbox — l’alignement, l’espacement, le retour à la ligne — est décrit par rapport à ces deux axes. Une fois que vous avez assimilé ce modèle mental, les propriétés deviennent intuitives.

Flexbox est également unidimensionnel. Il dispose les éléments soit en une seule ligne, soit en une seule colonne à la fois. Si vous devez contrôler simultanément les lignes et les colonnes, CSS Grid est l’outil le plus adapté. Mais pour la vaste majorité des mises en page au niveau des composants — barres de navigation, rangées de cartes, groupes de formulaires, pieds de page — Flexbox est exactement ce dont vous avez besoin.

Conteneur flex vs éléments flex

Flexbox fonctionne via une relation parent-enfant. Vous transformez un élément parent en conteneur flex en définissant display: flex. Ses enfants directs deviennent automatiquement des éléments flex et commencent à suivre les règles de Flexbox.

/* style.css */
.container {
  display: flex;
}

.container > * {
  /* These are now flex items */
}

Cette distinction est importante car chaque propriété Flexbox s’applique soit au conteneur, soit aux éléments — jamais aux deux. Les propriétés du conteneur contrôlent l’environnement de mise en page : la direction de l’axe, l’alignement, le retour à la ligne et l’espacement (gap). Les propriétés des éléments contrôlent le comportement individuel de chaque élément au sein de cet environnement : sa capacité à s’agrandir ou à rétrécir, sa taille de base et son ordre.

Un conteneur peut également utiliser display: inline-flex pour se comporter comme un élément en ligne tout en appliquant Flexbox à ses enfants. En pratique, display: flex (au niveau du bloc) couvre la majorité des cas d’utilisation.

flex-direction

flex-direction définit la direction de l’axe principal. C’est la propriété Flexbox la plus fondamentale car toutes les autres propriétés dépendent du sens de cet axe.

/* style.css */
.container {
  display: flex;
  flex-direction: row; /* default */
}

Les quatre valeurs possibles :

• row — les éléments s’écoulent de gauche à droite. C’est la valeur par défaut et la plus courante.
• row-reverse — les éléments s’écoulent de droite à gauche.
• column — les éléments s’écoulent de haut en bas.
• column-reverse — les éléments s’écoulent de bas en haut.

/* style.css */
.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

.row-reverse {
  flex-direction: row-reverse;
}

.column-reverse {
  flex-direction: column-reverse;
}

Modifier flex-direction permet d’intervertir l’axe principal et l’axe secondaire. Lorsque flex-direction est défini sur row, justify-content contrôle la distribution horizontale et align-items contrôle l’alignement vertical. Lorsque flex-direction est défini sur column, ces rôles sont inversés.

justify-content

justify-content aligne les éléments flex le long de l’axe principal. Il contrôle la manière dont l’espace supplémentaire est réparti entre ou autour des éléments.

/* style.css */
.container {
  display: flex;
  justify-content: center;
}

Les valeurs les plus courantes :

• flex-start — les éléments sont regroupés au début de l’axe principal (par défaut).
• center — les éléments sont centrés le long de l’axe principal.
• flex-end — les éléments sont regroupés à la fin de l’axe principal.
• space-between — les éléments sont répartis avec un espace égal entre eux, sans espace aux extrémités.
• space-around — les éléments ont un espace égal autour d’eux, les espaces entre les éléments sont donc deux fois plus grands que les espaces aux extrémités.
• space-evenly — les éléments ont un espace exactement égal entre eux et aux extrémités.

/* style.css */
.start {
  justify-content: flex-start;
}

.center {
  justify-content: center;
}

.between {
  justify-content: space-between;
}

.around {
  justify-content: space-around;
}

.evenly {
  justify-content: space-evenly;
}

space-between est la valeur la plus utilisée pour les barres de navigation — le logo se place à gauche, les liens à droite, avec l’espace au milieu. space-evenly offre une distribution plus équilibrée pour des éléments comme des barres d’icônes ou des listes de tags.

align-items

align-items aligne les éléments flex le long de l’axe transversal (cross axis). Alors que justify-content distribue l’espace le long de l’axe principal, align-items contrôle la manière dont les éléments se positionnent sur l’axe transversal.

/* style.css */
.container {
  display: flex;
  align-items: center;
}

Les valeurs clés :

• stretch — les éléments s’étirent pour remplir l’axe transversal (par défaut).
• flex-start — les éléments s’alignent au début de l’axe transversal.
• center — les éléments sont centrés sur l’axe transversal.
• flex-end — les éléments s’alignent à la fin de l’axe transversal.
• baseline — les éléments s’alignent selon leur ligne de base textuelle.

/* style.css */
.container {
  display: flex;
  align-items: stretch; /* default */
}

.centered {
  align-items: center;
}

.bottom {
  align-items: flex-end;
}

.baseline-aligned {
  align-items: baseline;
}

La valeur baseline est utile lorsque les éléments ont des tailles de police ou des padding différents — elle garantit que leur texte s’aligne sur une même ligne invisible. La valeur par défaut stretch explique pourquoi les éléments flex paraissent souvent plus hauts que prévu : ils s’étendent par défaut pour remplir l’axe transversal.

align-content

align-content contrôle la manière dont plusieurs lignes d’éléments flex sont espacées le long de l’axe transversal. Cela n’a d’effet que lorsque flex-wrap est défini sur wrap et que le contenu s’enroule sur plusieurs lignes.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

Sans flex-wrap: wrap, align-content n’a aucun effet car il n’y a qu’une seule ligne. Lorsque le contenu s’enroule, les valeurs sont identiques à celles de justify-content :

• flex-start — les lignes sont regroupées vers le début.
• center — les lignes sont centrées le long de l’axe transversal.
• flex-end — les lignes sont regroupées vers la fin.
• space-between — les lignes sont réparties avec un espace égal entre elles.
• space-around — les lignes ont un espace égal autour d’elles.
• space-evenly — les lignes ont un espacement exactement identique.
• stretch — les lignes s’étirent pour remplir l’espace disponible.

Pour les conteneurs flex sur une seule ligne, c’est align-items qu’il vous faut. align-content devient pertinent pour les mises en page multi-lignes, comme les nuages de tags ou les groupes de boutons avec retour à la ligne.

flex-wrap

Par défaut, les éléments flex tentent de tenir sur une seule ligne. flex-wrap permet aux éléments de s’enrouler sur plusieurs lignes lorsqu’ils manquent d’espace.

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
}

Les trois valeurs possibles :

• nowrap — tous les éléments restent sur une seule ligne (par défaut). Les éléments peuvent rétrécir pour s’adapter.
• wrap — les éléments passent à la ligne si nécessaire.
• wrap-reverse — les éléments passent à la ligne, mais la direction de l’axe transversal est inversée.

/* style.css */
.single-line {
  flex-wrap: nowrap; /* default */
}

.multi-line {
  flex-wrap: wrap;
}

.reversed-wrap {
  flex-wrap: wrap-reverse;
}

Le retour à la ligne est essentiel pour les mises en page responsives. Une barre de navigation contenant de nombreux liens peut utiliser flex-wrap: wrap afin que les éléments passent à la ligne sur les petits écrans sans déborder. Combiné avec gap, les mises en page avec retour à la ligne restent propres sans nécessiter de marges supplémentaires.

flex-grow, flex-shrink, flex-basis

Ces trois propriétés contrôlent la manière dont les éléments flex se partagent l’espace le long de l’axe principal. Elles fonctionnent ensemble pour déterminer la taille finale de chaque élément.

flex-basis définit la taille initiale d’un élément avant que l’espace supplémentaire ne soit distribué. Cela fonctionne comme width, mais est respecté par l’algorithme Flexbox.

/* style.css */
.item {
  flex-basis: 200px;
}

flex-grow contrôle la mesure dans laquelle un élément s’étend pour remplir l’espace disponible. La valeur par défaut est 0, ce qui signifie que les éléments ne grandissent pas. Une valeur de 1 signifie que l’élément prend une part égale de l’espace restant.

/* style.css */
.item-a {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2; /* takes twice as much leftover space as item-a */
}

flex-shrink contrôle la mesure dans laquelle un élément se contracte lorsqu’il n’y a pas assez d’espace. La valeur par défaut est 1, ce qui signifie que les éléments rétrécissent proportionnellement. Une valeur de 0 empêche le rétrécissement.

/* style.css */
.item {
  flex-shrink: 0; /* will not shrink, may overflow */
}

Le raccourci flex combine ces trois propriétés :

/* style.css */
.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

.item {
  flex: 0 0 200px; /* no grow, no shrink, fixed 200px */
}

Le raccourci flex: 1 est l’un des modèles les plus utiles de Flexbox — il donne à chaque élément une part égale de l’espace disponible, ce qui est parfait pour des colonnes de largeur égale, des vues divisées et des grilles responsives.

la propriété order

Par défaut, les éléments flex s’affichent dans l’ordre où ils apparaissent dans le HTML. La propriété order vous permet de les réorganiser visuellement sans modifier le DOM.

/* style.css */
.item-a {
  order: 2;
}

.item-b {
  order: 1; /* appears first visually */
}

.item-c {
  order: 3; /* appears last visually */
}

Tous les éléments ont une valeur par défaut de order: 0. Les nombres les plus bas apparaissent en premier. Les éléments ayant la même valeur d’ordre s’affichent selon l’ordre source. Les valeurs négatives sont acceptées et placent les éléments avant ceux ayant l’ordre par défaut.

C’est particulièrement utile pour le design responsive : si vous souhaitez qu’une barre latérale apparaisse au-dessus du contenu principal sur mobile, mais en dessous sur desktop, changez simplement la valeur de order via une media query plutôt que de restructurer le HTML.

la propriété gap

La propriété gap ajoute un espacement constant entre les éléments flex. Elle remplace les anciennes astuces de marges qui étaient autrefois nécessaires pour gérer l’espacement dans les mises en page flex.

/* style.css */
.container {
  display: flex;
  gap: 1rem;
}

Vous pouvez définir des valeurs différentes pour l’espacement des lignes et des colonnes :

/* style.css */
.container {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
  column-gap: 2rem;
}

Contrairement aux marges, gap n’ajoute de l’espace qu’entre les éléments — et non avant le premier ou après le dernier. Cela rend le comportement prévisible et élimine le besoin de marges négatives ou d’éléments enveloppes supplémentaires. Elle fonctionne aussi bien avec les mises en page flex sur une seule ligne qu’avec celles sur plusieurs lignes.

Motifs Flexbox courants

Une fois que vous maîtrisez les propriétés, les motifs s’imposent naturellement. Voici les mises en page les plus courantes que Flexbox permet de résoudre.

Centrer le contenu :

/* style.css */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

C’est l’utilisation classique de Flexbox : elle centre un élément enfant horizontalement et verticalement à l’intérieur de son parent. Avant Flexbox, le centrage vertical était un problème notoire.

Barres de navigation :

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

.nav-links {
  display: flex;
  gap: 1.5rem;
}

Le logo se place à gauche, les liens à droite, et tout reste centré verticalement. L’ajout de gap aux liens permet de les espacer uniformément.

Mises en page de cartes (Cards) :

/* style.css */
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 300px;
}

Les cartes s’agrandissent pour remplir l’espace disponible, rétrécissent si nécessaire et passent à la ligne sur les petits écrans. Le 300px basis définit une largeur minimale confortable.

Mise en page “Holy Grail” :

/* style.css */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 250px;
}

.main {
  flex: 1;
}

La page est une colonne qui remplit le viewport. La section centrale est une ligne avec une barre latérale de largeur fixe et une zone principale flexible. Ce motif était extrêmement difficile à réaliser avant Flexbox.

Quand utiliser Flexbox vs Grid

Flexbox et CSS Grid sont complémentaires et non concurrents. La règle la plus simple : utilisez Flexbox pour une dimension, et Grid pour deux.

Utilisez Flexbox lorsque :

• Vous disposez des éléments sur une seule ligne ou une seule colonne.
• Vous devez aligner ou distribuer l’espace entre les éléments.
• Vous créez des mises en page au niveau des composants : barres de navigation, groupes de boutons, lignes de formulaires, rangées de cartes.
• Vous voulez que les éléments passent naturellement à la ligne (wrap).
• Vous avez besoin de centrer du contenu.

Utilisez Grid lorsque :

• Vous devez contrôler simultanément les lignes et les colonnes.
• Vous créez des mises en page au niveau de la page avec un header, une sidebar, un contenu principal et un footer.
• Vous souhaitez un placement explicite des éléments dans une grille.
• Vous avez besoin que la taille des pistes dépende du conteneur de la grille plutôt que du contenu.

En pratique, la plupart des projets utilisent les deux. Une mise en page de page utilise Grid pour la structure globale, tandis que les composants individuels à l’intérieur de cette structure utilisent Flexbox pour l’alignement interne. Ils répondent à des problèmes différents et fonctionnent parfaitement ensemble.

Bonnes pratiques

• Utilisez gap plutôt que des marges — cela n’ajoute de l’espace qu’entre les éléments, évitant ainsi les problèmes d’espacement sur les bords.
• Utilisez le raccourci flex — flex: 1 est plus propre que de définir séparément grow, shrink et basis.
• Évitez les largeurs fixes sur les éléments flex — laissez flex-basis et flex-grow gérer le dimensionnement pour garantir la responsivité.
• Privilégiez flex-wrap: wrap pour les mises en page responsives plutôt que les media queries pour le dimensionnement des éléments.
• Utilisez align-items: center pour le centrage vertical — c’est l’approche la plus fiable.
• Combinez avec min-width: 0 sur les éléments flex susceptibles de déborder — par défaut, les éléments flex ne rétrécissent pas en dessous de la taille de leur contenu.
• Utilisez du HTML sémantique à l’intérieur des conteneurs flex — Flexbox gère la mise en page, pas la signification.
• Testez avec différentes longueurs de contenu — les mises en page Flexbox doivent s’adapter gracieusement aux contenus courts comme aux contenus longs.

Erreurs courantes

• Appliquer display: flex sur les éléments au lieu du conteneur.
• Oublier que align-content nécessite flex-wrap: wrap pour avoir un effet.
• Utiliser des width fixes sur les éléments flex au lieu de flex-basis.
• Ne pas définir min-width: 0 sur les éléments susceptibles de déborder de leur conteneur flex.
• Abuser de !important pour forcer la taille des éléments flex au lieu de comprendre l’algorithme flex.
• Appliquer les propriétés Flexbox sur le mauvais axe — oublier que flex-direction inverse les axes principal et transversal.
• Ignorer l’accessibilité — Flexbox modifie l’ordre visuel avec order mais pas l’ordre du DOM, donc les lecteurs d’écran suivent toujours la source.

Est-ce que Flexbox vaut toujours la peine d’être appris en 2026 ?

Absolument. Flexbox n’est pas une tendance passagère — c’est le système de mise en page fondamental du CSS moderne. Chaque framework majeur, bibliothèque de composants et système de design s’appuie dessus. CSS Grid complète Flexbox pour les mises en page bidimensionnelles, mais Flexbox reste la solution par défaut pour l’alignement, l’espacement et la distribution au niveau des composants. Comprendre Flexbox facilite également l’apprentissage de Grid, car le modèle d’axes et les propriétés d’alignement sont directement transposables. Si vous développez quoi que ce soit pour le web, Flexbox est une compétence que vous utiliserez quotidiennement.

Comment apprendre Flexbox

Flexbox est visuel, donc la meilleure façon de l’apprendre est de le voir en action :

1. Commencez par display: flex et justify-content — observez comment les éléments se distribuent le long d’un axe.
2. Ajoutez align-items — comprenez l’axe transversal et son lien avec flex-direction.
3. Expérimentez avec flex-direction: column — voyez comment les axes s’inversent.
4. Essayez flex-wrap: wrap et gap — construisez une mise en page sur plusieurs lignes.
5. Jouez avec flex-grow, flex-shrink et flex-basis — comprenez comment les éléments se partagent l’espace.
6. Construisez des mises en page réelles : une barre de navigation, une rangée de cartes, un hero centré, une mise en page avec barre latérale.
7. Utilisez un outil interactif comme Flexbox Froggy ou le guide Flexbox de CSS Tricks pour visualiser chaque propriété.

Ensuite, passez à CSS Grid pour les mises en page bidimensionnelles. Notre tutoriel CSS interactif couvre Flexbox, Grid et le design responsive avec des exercices pratiques.