Flexbox : le guide complet par l'exemple

Flexbox (ou « Flexible Box Layout ») est le modèle de mise en page CSS qui a mis fin à des années de bricolage avec float et inline-block. Il permet de disposer, aligner et distribuer des éléments dans un espace, même quand leurs tailles sont inconnues ou dynamiques. C’est l’outil idéal pour tout ce qui s’organise sur une seule dimension : une barre de navigation, une rangée de cartes, un centrage. Ce guide vous fait tout comprendre par l’exemple.

Le principe : conteneur et items

Flexbox repose sur une relation parent-enfant. Vous déclarez display: flex sur un conteneur, et tous ses enfants directs deviennent automatiquement des items flexibles.

<div class="conteneur">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.conteneur {
  display: flex;
}

Par défaut, les items se placent côte à côte sur une ligne. À partir de là, deux familles de propriétés entrent en jeu : celles que l’on applique au conteneur (pour organiser l’ensemble), et celles que l’on applique aux items (pour ajuster un élément en particulier).

Un concept clé : Flexbox raisonne selon deux axes. L’axe principal (horizontal par défaut) suit la direction des items ; l’axe secondaire lui est perpendiculaire. Beaucoup de confusions viennent d’un oubli de cette distinction.

flex-direction : choisir la direction

flex-direction définit l’axe principal, donc le sens dans lequel les items s’empilent.

.conteneur {
  display: flex;
  flex-direction: row;            /* défaut : de gauche à droite */
  /* flex-direction: row-reverse; de droite à gauche */
  /* flex-direction: column;      de haut en bas */
  /* flex-direction: column-reverse; de bas en haut */
}

Attention : dès que vous passez en column, l’axe principal devient vertical. Les propriétés justify-content et align-items (vues ensuite) échangent alors leur effet visuel. C’est logique une fois qu’on pense en termes d’axes.

justify-content : aligner sur l’axe principal

justify-content distribue les items le long de l’axe principal. C’est la propriété que vous utiliserez le plus.

.conteneur {
  display: flex;
  justify-content: flex-start;    /* défaut : collés au début */
}

Les valeurs disponibles, avec leur effet :

flex-start : items regroupés au début.
flex-end : items regroupés à la fin.
center : items centrés.
space-between : premier et dernier collés aux bords, espace égal entre les autres.
space-around : espace égal autour de chaque item (demi-espace aux extrémités).
space-evenly : espace strictement égal partout, y compris aux bords.

space-between est le grand classique pour une barre de navigation avec logo à gauche et menu à droite.

align-items : aligner sur l’axe secondaire

align-items gère l’alignement sur l’axe perpendiculaire (vertical quand la direction est row).

.conteneur {
  display: flex;
  height: 200px;
  align-items: center;   /* centre verticalement les items */
}

Les valeurs principales :

stretch : défaut, les items s’étirent pour remplir la hauteur.
flex-start : alignés en haut.
flex-end : alignés en bas.
center : centrés verticalement.
baseline : alignés sur la ligne de base du texte.

align-self : l’exception pour un seul item

align-self s’applique à un item pour surcharger l’align-items du conteneur. Pratique pour décaler un seul élément.

.item-special {
  align-self: flex-end; /* cet item seul descend en bas */
}

flex-wrap : passer à la ligne

Par défaut, Flexbox force tous les items sur une seule ligne, quitte à les compresser. flex-wrap: wrap autorise le retour à la ligne quand la place manque : c’est essentiel pour le responsive.

.conteneur {
  display: flex;
  flex-wrap: wrap;   /* les items passent à la ligne si nécessaire */
}

Vous verrez souvent la forme raccourcie flex-flow, qui combine direction et wrap :

.conteneur {
  display: flex;
  flex-flow: row wrap;
}

gap : espacer proprement les items

Longtemps, on espaçait les items avec des margin. La propriété gap a tout simplifié : elle ajoute un espace entre les items, sans marge parasite sur les bords extérieurs.

.conteneur {
  display: flex;
  gap: 16px;            /* même espace horizontal et vertical */
  /* gap: 20px 10px;   ligne 20px, colonne 10px */
}

Combinée à flex-wrap: wrap, la propriété gap gère à elle seule l’espacement d’une grille de cartes, y compris entre les lignes.

flex-grow, flex-shrink et flex-basis

C’est le cœur de la « flexibilité ». Ces trois propriétés, appliquées aux items, décident comment ils occupent l’espace disponible.

flex-grow : capacité à grandir pour remplir l’espace libre. 0 = ne grandit pas, 1 = prend sa part de l’espace restant.
flex-shrink : capacité à rétrécir quand la place manque. 1 par défaut.
flex-basis : taille de base de l’item avant répartition (remplace width sur l’axe principal).

.item {
  flex-grow: 1;      /* tous les items se partagent l'espace à égalité */
  flex-shrink: 1;
  flex-basis: 0;
}

En pratique, on utilise la propriété raccourcie flex :

.item {
  flex: 1;          /* équivaut à flex: 1 1 0 : items de largeur égale */
}

.sidebar {
  flex: 0 0 250px;  /* ne grandit pas, ne rétrécit pas, fait 250px fixes */
}

Le pattern flex: 0 0 250px sur une barre latérale et flex: 1 sur le contenu principal donne une mise en page à deux colonnes d’une robustesse remarquable.

Cas concrets

Logo à gauche, liens à droite, le tout centré verticalement.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}
.navbar .liens {
  display: flex;
  gap: 24px;
}

Une grille de cartes responsive

Des cartes qui s’alignent, passent à la ligne et gardent une largeur minimale.

.cartes {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.carte {
  flex: 1 1 280px;  /* base 280px, mais s'étire pour remplir la ligne */
}

Un centrage parfait

Le fameux « centrer horizontalement ET verticalement », en trois lignes.

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

Ce centrage est si pratique qu’il mérite d’être connu par cœur. Si vous voulez explorer toutes les techniques de centrage, y compris avec Grid ou position, notre guide sur centrer un élément en CSS fait le tour de la question.

En résumé

Flexbox s’apprend en gardant en tête sa logique d’axes : justify-content gère l’axe principal, align-items l’axe secondaire. Le conteneur organise l’ensemble (display: flex, direction, wrap, gap), tandis que flex-grow/shrink/basis ajustent chaque item. Avec ces quelques propriétés, vous couvrez l’immense majorité des mises en page à une dimension. Pour des grilles complexes en deux dimensions, c’est vers CSS Grid qu’il faudra ensuite vous tourner.