Flexbox CSS expliqué : aligner et organiser un layout moderne (Partie 13)

Pendant longtemps, créer une mise en page en CSS était compliqué : floats, hacks, alignements impossibles, hauteur des colonnes incohérente…

Flexbox a changé la façon de construire des layouts. Il permet d’aligner et de répartir des éléments dans un conteneur de manière simple et prévisible.

La logique Flexbox est très “humaine” : on met des éléments dans une ligne (ou une colonne) et on décide comment ils se placent.

👉 Flexbox est parfait pour les menus, les barres d’actions, les cartes et les sections.

1) Le principe : conteneur flex + items

Pour utiliser Flexbox, on applique display: flex au conteneur. Les éléments à l’intérieur deviennent des “flex items”.

Exemple HTML :

<div class="row">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

Exemple CSS :

.row {
  display: flex;
  gap: 12px;
}

Résultat logique : les boîtes se mettent sur une ligne et l’espace entre elles est géré par gap.

2) Comprendre les axes : main axis et cross axis

Flexbox fonctionne avec deux axes :

Main axis : direction principale (ligne ou colonne)
Cross axis : direction perpendiculaire

Par défaut, le main axis est horizontal (row).

.container {
  display: flex;
  flex-direction: row;
}

Pour passer en colonne :

.container {
  display: flex;
  flex-direction: column;
}

3) justify-content : aligner sur l’axe principal

justify-content contrôle l’alignement sur le main axis.

Exemples :

.container {
  display: flex;
  justify-content: flex-start; /* par défaut */
}

.container {
  display: flex;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: space-between;
}

Cas réel : header avec logo à gauche et menu à droite.

<header class="header">
  <div class="logo">MonSite</div>
  <nav class="menu">
    <a href="#">Accueil</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </nav>
</header>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.menu {
  display: flex;
  gap: 14px;
}

4) align-items : aligner sur l’axe secondaire

align-items aligne sur le cross axis. Très utile pour centrer verticalement.

.container {
  display: flex;
  align-items: center;
}

Valeurs courantes :

stretch (par défaut)
center
flex-start
flex-end

5) flex-wrap : passer à la ligne quand il n’y a plus de place

Par défaut, Flexbox essaye de tout mettre sur une seule ligne. Avec flex-wrap, les éléments peuvent passer à la ligne.

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Cas réel : grille de cartes (produits, articles, tutoriels).

<section class="grid">
  <article class="card">Carte 1</article>
  <article class="card">Carte 2</article>
  <article class="card">Carte 3</article>
  <article class="card">Carte 4</article>
</section>

.card {
  flex: 0 0 220px; /* largeur de base */
  border: 1px solid #e5e7eb;
  padding: 16px;
  border-radius: 12px;
}

6) La propriété flex : grandir, rétrécir, largeur de base

La propriété flex est un raccourci : flex: grow shrink basis;

Exemple simple : deux colonnes, une prend plus d’espace.

<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Contenu</main>
</div>

.layout {
  display: flex;
  gap: 16px;
}

.sidebar {
  flex: 0 0 240px; /* largeur fixe */
}

.content {
  flex: 1; /* prend le reste de l’espace */
}

7) gap : gérer les espaces proprement

Avant, on utilisait des margins partout. Aujourd’hui, gap est beaucoup plus propre pour gérer l’espace entre les items.

.row {
  display: flex;
  gap: 12px;
}

8) Erreurs fréquentes avec Flexbox

Oublier d’appliquer display:flex au conteneur
Confondre justify-content et align-items
Ne pas utiliser gap (et multiplier les margins)
Oublier flex-wrap sur une grille

👉 Si vos éléments débordent, pensez à flex-wrap et aux largeurs.

Vous connaissez maintenant Flexbox : comment aligner, centrer, répartir et organiser des éléments dans un layout moderne.

Dans la Partie 14, nous allons découvrir l’autre outil moderne de layout : CSS Grid (parfait pour des pages complètes).

✅ Flexbox est votre meilleur ami pour les composants et les sections.