Flexbox

Definition

Modèle de layout unidimensionnel qui distribue l'espace entre les items d'un conteneur sur un axe principal. Parfait pour l'alignement, la distribution et le reordonnancement d'éléments.

Analogie

Comme des passagers dans un bus : ils se répartissent sur une rangée, avec plus ou moins d'espace entre eux.

Exemple de code

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.item { flex: 1; }

Cas d'usage

Aligner des éléments dans une navbar, centrer du contenu, ou distribuer des cartes sur une ligne.

Anti-pattern

Termes lies