> Comprendre Flexbox par la pratique : conteneur et items, direction, justify-content, align-items, wrap, gap et flex-grow/shrink/basis. Avec des cas concrets : navigation, cartes et centrage.

*Source : https://coder-studio.com/tutoriels/flexbox-guide/*

---

[// Web](https://coder-studio.com/tutoriels/)

# Flexbox : le guide complet par l'exemple

Par **Kévin Papot** · publié le 30 septembre 2025

**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

### Une barre de navigation

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](https://coder-studio.com/tutoriels/centrer-element-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.

## À lire ensuite

-   [CSS Grid : le guide complet pour maîtriser la grille](https://coder-studio.com/tutoriels/css-grid-guide/)
-   [Centrer un élément en CSS : toutes les méthodes](https://coder-studio.com/tutoriels/centrer-element-css/)
-   [Apprendre JavaScript : par où commencer](https://coder-studio.com/tutoriels/apprendre-javascript/)