Flexbox — CSS course | Learn to code

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)

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)

Astuce : 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)

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)

Tip: 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>

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

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

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

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

Next step

Flexbox rules over one dimension, a row or a column. But to build a real two dimensional layout, rows AND columns at once, you need a more powerful tool. In the next lesson we take on CSS Grid and its full grids.

Lesson 6: CSS Grid →