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)

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)

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)

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.

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

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