Qu'est-ce que Flexbox et comment centrez-vous du contenu avec?

Question

Accepted Answer

**Flexbox** est un système de mise en page unidimensionnel — il arrange les éléments en une seule **ligne** ou **colonne** et distribue l'espace le long de cette ligne. C'est la réponse moderne aux problèmes d'alignement et d'espacement qui nécessitaient autrefois des flottants et des astuces.

```css
.container {
  display: flex;              /* turn on flex; children become flex items */
  flex-direction: row;       /* main axis: row (default) or column */
  gap: 1rem;                 /* space BETWEEN items (no margin hacks) */
}
```

## Les deux axes

Flexbox a un **axe principal** (la direction du flux des éléments) et un **axe transversal** (perpendiculaire). Les propriétés sont mappées à eux :

```css
.container {
  justify-content: center; /* aligns along the MAIN axis */
  align-items: center;     /* aligns along the CROSS axis */
}
```

## Centrage parfait — le cas d'usage célèbre

```css
.center {
  display: flex;
  justify-content: center; /* horizontal (main axis = row) */
  align-items: center;     /* vertical (cross axis) */
  min-height: 100vh;
}
```

Ces trois lignes centrent un enfant à la fois horizontalement et verticalement — une tâche qui était notoirement difficile avant Flexbox.

## Modèles courants

```css
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }

/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
```

Les options `justify-content` incluent `flex-start`, `center`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

## Pourquoi c'est important

Flexbox est l'outil quotidien pour les barres de navigation, les groupes de boutons, les lignes de cartes, le centrage et toute mise en page de « ligne d'éléments ».

Comprendre le modèle d'axe principal/axe transversal (et que `justify-content`/`align-items` changent de sens lorsque vous modifiez `flex-direction`) est le modèle mental clé.

Utilisez Flexbox pour les mises en page 1D et Grid pour les 2D.