Flexbox · Cours CSS | Apprendre à coder

C'est quoi Flexbox ?

Flexbox (Flexible Box Layout) est un système de mise en page CSS conçu pour aligner et distribuer des éléments dans un conteneur. Avant Flexbox, centrer un élément verticalement était un cauchemar. Maintenant, c'est une ligne.

Le principe : on déclare display: flex sur le conteneur, et ses enfants directs deviennent des flex items qui se positionnent automatiquement.

Direction et alignement

flex-direction: row : en ligne (par défaut, de gauche à droite)
flex-direction: column : en colonne (de haut en bas)

Prédisez avant de lire

Avant de dérouler : Sur un conteneur display: flex avec la direction par défaut (row), justify-content: center centre-t-il horizontalement ou verticalement ? Et align-items: center ? Que se passe-t-il pour ces deux propriétés si on passe le conteneur en flex-direction: column ?

Voir la réponse

En row (direction par défaut), justify-content agit sur l'axe principal (horizontal) : il centre horizontalement. align-items agit sur l'axe transversal (vertical) : il centre verticalement. Ces propriétés ne sont pas fixées à « horizontal » et « vertical » : elles suivent les axes. Si on passe en flex-direction: column, l'axe principal devient vertical et l'axe transversal devient horizontal. justify-content centre alors verticalement et align-items horizontalement. Les deux propriétés échangent leur effet visuel. C'est pour ça que justify-content: center; align-items: center; centre parfaitement dans les deux sens quelle que soit la direction.

L'axe principal (flex-direction) définit deux propriétés d'alignement :

justify-content : alignement sur l'axe principal (horizontal en row)
align-items : alignement sur l'axe transversal (vertical en row)

L'axe principal porte le flux des items ; l'axe secondaire lui est perpendiculaire.

Valeurs de justify-content : flex-start, center, flex-end, space-between, space-around, space-evenly.

Valeurs de align-items : stretch (par défaut), center, flex-start, flex-end.

Gap, flex-wrap et flex

gap: 16px : espace entre les flex items (remplace les margin)
flex-wrap: wrap : les items passent à la ligne si pas assez de place
flex: 1 : raccourci pour flex-grow: 1; flex-shrink: 1; flex-basis: 0 (l'item prend l'espace disponible)

display: flex; justify-content: center; align-items: center; : ces 3 lignes centrent parfaitement n'importe quel contenu, horizontalement et verticalement. C'est la technique de centrage la plus utilisée.

What is Flexbox?

Flexbox (Flexible Box Layout) is a CSS layout system designed to align and distribute elements in a container. Before Flexbox, vertically centering an element was a nightmare. Now it's one line.

The principle: you declare display: flex on the container, and its direct children become flex items that position themselves automatically.

Direction and alignment

flex-direction: row — in a row (default, left to right)
flex-direction: column — in a column (top to bottom)

Predict before reading

Before you scroll down: On a display: flex container with the default direction (row), does justify-content: center center horizontally or vertically? And align-items: center? What happens to these two properties if you switch the container to flex-direction: column?

See the answer

In row (the default direction), justify-content acts on the main axis (horizontal): it centers horizontally. align-items acts on the cross axis (vertical): it centers vertically. These properties are not fixed to "horizontal" and "vertical" — they follow the axes. If you switch to flex-direction: column, the main axis becomes vertical and the cross axis becomes horizontal. justify-content then centers vertically and align-items horizontally. The two properties swap their visual effect. That is why justify-content: center; align-items: center; centers perfectly in both directions regardless of the flex direction.

The main axis (flex-direction) defines two alignment properties:

justify-content — alignment on the main axis (horizontal in row)
align-items — alignment on the cross axis (vertical in row)

The main axis carries the flow of items; the cross axis is perpendicular to it.

justify-content values: flex-start, center, flex-end, space-between, space-around, space-evenly.

align-items values: stretch (default), center, flex-start, flex-end.

Gap, flex-wrap and flex

gap: 16px — space between flex items (replaces margins)
flex-wrap: wrap — items wrap to the next line if there's not enough room
flex: 1 — shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0 (item takes available space)

display: flex; justify-content: center; align-items: center; — these 3 lines perfectly center any content, horizontally and vertically. It's the most used centering technique.

Essayez vous-même

/* Navbar avec Flexbox */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1e3a5f;
    padding: 12px 20px;
    color: white;
  }
  .nav-links {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
  }
  .nav-links a {
    color: white;
    text-decoration: none;
  }

/* Cards avec Flexbox */
  .cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px;
  }
  .card {
    flex: 1;
    min-width: 120px;
    background: #f0f7ff;
    border: 1px solid #bdd5ea;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
  }
</style>

<nav class="navbar">
    <strong>MonSite</strong>
    <ul class="nav-links">
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

<div class="cards">
    <div class="card">Carte 1</div>
    <div class="card">Carte 2</div>
    <div class="card">Carte 3</div>
</div>

🎯 Pratique

S'entraîner (clique pour ouvrir) :

✨ Prompt IA

Avec l'IA

Pour pratiquer Flexbox de manière ludique, essayez :

Flexbox Froggy : https://flexboxfroggy.com/ : Un jeu gratuit pour apprendre Flexbox en guidant des grenouilles vers leurs nénuphars.

💬 Ré-explique sans regarder

Ré-explique sans regarder

Avec tes mots : quelle est la différence entre l'axe principal et l'axe transversal, et que se passe-t-il pour justify-content et align-items quand on passe de flex-direction: row à column ?

Une bonne explication dit : l'axe principal suit la flex-direction, l'axe transversal lui est perpendiculaire. justify-content aligne toujours sur l'axe principal, align-items sur l'axe transversal. Donc en row : justify-content = horizontal, align-items = vertical. En column les deux s'inversent : justify-content devient vertical et align-items horizontal. Les propriétés ne changent pas, c'est l'axe qui pivote.

Exercice : Corrigez le code de l'IA

L'IA devait centrer le contenu de la boîte, mais elle a utilisé justify-content: flex-start au lieu de center. Le texte est collé à gauche au lieu d'être centré. Corrigez !

Corrigez le code

⚖️ Juge le code de l'IA

Accepter ou rejeter le code de l'IA

Tu demandes à l'IA de centrer verticalement le titre dans une barre display: flex (en row). Elle propose ce code. L'accepter tel quel ou le rejeter, et dire pourquoi.

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

À rejeter. Le besoin était un centrage vertical, mais en flex-direction: row (par défaut) c'est align-items: center qui agit sur l'axe vertical. justify-content: center centre sur l'axe principal, donc horizontalement : ça ne répond pas à la demande. C'est l'erreur d'axe la plus courante. La correction : ajouter align-items: center (et retirer le justify-content s'il n'était pas voulu).

🧠 Rappel libre

Rappel libre

Sans remonter dans la leçon : quelle propriété active Flexbox sur un conteneur, et quelles 3 déclarations centrent un contenu horizontalement et verticalement ?

display: flex active Flexbox sur le conteneur (ses enfants directs deviennent des flex items). Pour centrer dans les deux dimensions : display: flex; justify-content: center; align-items: center; : justify-content centre sur l'axe principal et align-items sur l'axe transversal.

Quelle propriété active Flexbox sur un conteneur ?

flex: 1 display: flex flexbox: on

Pour répartir l'espace également entre les items, on utilise :

justify-content: center justify-content: flex-end justify-content: space-between

Comment centrer un élément horizontalement ET verticalement avec Flexbox ?

display: flex; text-align: center; display: flex; justify-content: center; align-items: center; display: flex; margin: auto;

Que fait flex-wrap: wrap ?

Les items rétrécissent pour tenir sur une ligne Les items passent à la ligne s'il n'y a pas assez de place Les items disparaissent s'il n'y a pas assez de place

Prochaine étape

Flexbox règne sur une dimension, une ligne ou une colonne. Mais pour construire une vraie mise en page en deux dimensions, lignes ET colonnes en même temps, il faut un outil plus puissant. Dans la prochaine leçon, on attaque CSS Grid et ses grilles complètes.

Leçon 6 : CSS Grid →