# Flexbox

> Modèle de mise en page CSS conçu pour répartir et aligner des éléments sur un seul axe, horizontal ou vertical, en s'adaptant à l'espace disponible.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/flexbox/

Centrer verticalement un élément en CSS a longtemps été une plaisanterie récurrente chez les développeurs, tant les solutions de contournement (tableaux détournés, positionnement absolu bricolé) étaient laborieuses. Ce modèle de mise en page a réglé le problème en quelques propriétés, au point de devenir l'un des outils les plus utilisés du langage.

## Un conteneur, des éléments flexibles

Tout commence par `display: flex` sur un conteneur, qui transforme automatiquement ses enfants directs en éléments flexibles alignés sur un axe. Les propriétés `justify-content` et `align-items` gèrent respectivement l'alignement le long de cet axe et perpendiculairement à lui, tandis que `flex-grow`, `flex-shrink` et `flex-basis` contrôlent, sur chaque élément, sa capacité à s'étirer ou se rétracter selon l'espace disponible.

## Exemple

```
.barre-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
```

## À ne pas confondre avec la grille CSS

- Ce modèle raisonne sur un seul axe à la fois : pour une mise en page à deux dimensions (lignes et colonnes simultanément), la grille CSS reste généralement plus adaptée et plus lisible.
- Dans un thème WordPress à blocs, le bloc natif « Colonnes » repose directement sur ce modèle pour répartir son contenu, avec des largeurs proportionnelles définies via `flex-basis` en pourcentage.

Bon à savoir : la propriété raccourcie `gap`, longtemps réservée à la grille CSS, fonctionne aujourd'hui aussi avec ce modèle dans tous les navigateurs modernes, évitant les marges négatives autrefois nécessaires pour espacer les éléments.