Flexbox : axes, justify/align, gap, flex-grow

Maîtrisez les deux axes de Flexbox pour aligner, centrer et répartir vos éléments dans les mises en page du quotidien.

9 min · 3 questions

Barre de navigation, rangée de cartes, formulaire aligné : Flexbox est l'outil quotidien de la mise en page en une dimension. Tout repose sur deux axes : l'axe principal (défini par flex-direction, horizontal par défaut) et l'axe transversal, perpendiculaire au premier. justify-content répartit les éléments le long de l'axe principal ; align-items les aligne sur l'axe transversal. Retenez ce duo : il résout la majorité des cas. Prenons une barre de navigation classique.

<nav class="navbar">
  <a href="/" class="logo">Kodokon</a>
  <ul class="links">
    <li><a href="/courses">Cours</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
  <button class="cta">Essayer</button>
</nav>

Quelques déclarations transforment cette liste en barre professionnelle : space-between pousse le logo à gauche et le bouton à droite, align-items: center aligne verticalement des éléments de hauteurs différentes, et gap espace les liens sans marges à gérer.

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

Exercice mental : si vous passez .navbar en flex-direction: column, que fait justify-content: space-between ? Il répartit désormais les éléments verticalement, car l'axe principal a pivoté. C'est le piège classique de Flexbox : justify-content et align-items ne signifient pas « horizontal » et « vertical », mais « axe principal » et « axe transversal ». Autre cas d'usage incontournable : le centrage parfait d'un contenu.

.modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

flex-grow distribue l'espace libre restant entre les éléments. Cas concret : une mise en page avec une barre latérale fixe et un contenu qui occupe tout le reste. flex: 0 0 240px fige la barre latérale (elle ne grandit ni ne rétrécit), tandis que flex-grow: 1 laisse le contenu absorber tout l'espace disponible.

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 240px;
}

.content {
  flex-grow: 1;
}

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Avec flex-direction: column, que contrôle justify-content ?
   • L'alignement horizontal des éléments
   • L'alignement vertical, car l'axe principal est devenu vertical
   • L'espacement entre les lignes de texte
2. Quelle combinaison centre un élément horizontalement et verticalement dans un conteneur flex ?
   • text-align: center et vertical-align: middle
   • justify-content: center et align-items: center
   • margin: 0 auto sur le conteneur
3. Dans un conteneur flex, .a a flex-grow: 2 et .b a flex-grow: 1. Que se passe-t-il ?
   • .a est toujours exactement deux fois plus large que .b
   • .a reçoit deux fois plus d'espace libre restant que .b
   • .b est masqué au profit de .a