Flexbox

Le problème à résoudre

Tu veux trois cartes côte à côte, bien alignées, avec un espace égal. Ou un bouton centré dans une div. Ou un logo à gauche et les liens à droite.

Avant Flexbox, c'était compliqué. Centrer verticalement un élément — une vraie blague chez les développeurs.

Flexbox résout tout ça simplement. C'est l'outil de mise en page le plus utilisé aujourd'hui.

C'est quoi Flexbox ?

Flexbox est un mode d'affichage CSS. Il permet d'aligner, d'espacer et d'organiser des éléments en ligne ou en colonne.

Ça fonctionne avec deux niveaux : le conteneur (le parent) et les éléments (les enfants). Tu appliques Flexbox sur le parent. Les enfants obéissent automatiquement.

Activer Flexbox : display flex

Une seule ligne : display: flex sur le conteneur parent. Tous ses enfants directs s'alignent aussitôt en ligne horizontale.

<!-- HTML : un parent avec trois enfants -->
<div class="conteneur">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

/* CSS : une seule ligne transforme tout */
.conteneur {
  display: flex;  /* les enfants s'alignent en ligne ! */
}

Résultat : A, B, C s'alignent côte à côte automatiquement.

Direction : flex-direction

Par défaut, les éléments s'alignent en ligne horizontale. Tu peux changer ça.

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

Avec flex-direction: column, les éléments s'empilent verticalement :

Alignement horizontal : justify-content

justify-content contrôle l'alignement sur l'axe principal. Horizontal par défaut. Comment répartir l'espace entre les éléments ?

.conteneur {
  display: flex;
  justify-content: flex-start;    /* par défaut — tout à gauche */
  justify-content: center;        /* centré */
  justify-content: flex-end;      /* tout à droite */
  justify-content: space-between; /* espace entre chaque élément */
  justify-content: space-around;  /* espace autour de chaque élément */
  justify-content: space-evenly;  /* espace parfaitement égal partout */
}

justify-content: center — les éléments sont centrés :

justify-content: space-between — le premier à gauche, le dernier à droite, le reste réparti :

Alignement vertical : align-items

align-items contrôle l'alignement sur l'axe secondaire. Vertical par défaut. Tes éléments ont des hauteurs différentes — comment les aligner ?

.conteneur {
  display: flex;
  align-items: stretch;      /* par défaut — s'étire pour remplir */
  align-items: center;       /* centré verticalement */
  align-items: flex-start;   /* aligné en haut */
  align-items: flex-end;     /* aligné en bas */
  align-items: baseline;     /* aligné sur la ligne de base du texte */
}

L'espacement entre éléments : gap

gap ajoute un espace uniforme entre les éléments. Plus simple que des marges sur chaque élément. Pas d'espace avant le premier ni après le dernier — juste entre les éléments.

.conteneur {
  display: flex;
  gap: 1rem;         /* 16px entre chaque élément */
  gap: 1rem 2rem;    /* 1rem en vertical, 2rem en horizontal */
}

Centrer parfaitement : horizontal ET vertical

Avant Flexbox, centrer quelque chose au milieu d'un bloc était un vrai casse-tête. Maintenant, c'est trois lignes :

.conteneur {
  display: flex;
  justify-content: center;   /* centré horizontalement */
  align-items: center;       /* centré verticalement */
  min-height: 100vh;         /* pleine hauteur d'écran */
}

flex-wrap : si les éléments débordent

Par défaut, Flexbox met tout sur une ligne. Si les éléments manquent de place, ils rétrécissent. Avec flex-wrap: wrap, ceux qui n'ont plus de place passent à la ligne suivante. Indispensable pour les mises en page adaptées au mobile.

.grille-cartes {
  display: flex;
  flex-wrap: wrap;  /* les cartes passent à la ligne si pas de place */
  gap: 1rem;
}

.carte {
  /* Chaque carte prend au moins 250px, ou plus si la place le permet */
  flex: 1 1 250px;
}