Commencer→
Retour au cours

frontend / css

Flexbox fondamentaux

Leçon 51 exercice

Explication

Ce que vous allez apprendre

  • Distinguer l'axe principal de l'axe secondaire selon flex-direction
  • Utiliser justify-content et align-items sans les confondre
  • Comprendre et utiliser le raccourci flex: 1 pour des colonnes de largeur égale
  • Créer une barre de navigation avec display: flex et justify-content: space-between
  • Reconnaître que order ne modifie que l'affichage, jamais l'ordre du DOM

Dans quel contexte ?

Un développeur veut centrer verticalement et horizontalement le contenu d'une carte .carte-vide affichant "Aucun résultat" sur recherche.html. Avant Flexbox, cela demandait des astuces fragiles avec des tableaux ou du positionnement absolu approximatif. Avec display: flex; align-items: center; justify-content: center; sur le conteneur, le centrage devient trivial et reste stable quelle que soit la taille du contenu.

Étape 1 : le cauchemar avant Flexbox

Pendant des années, centrer verticalement un élément en CSS était devenu une blague récurrente chez les développeurs, tant les techniques nécessaires (floats, tableaux détournés) étaient complexes et fragiles. Flexbox a été créé précisément pour résoudre ce problème.

Étape 2 : la règle centrale, un seul axe à la fois

Voici le concept le plus important à intégrer : Flexbox travaille sur UN SEUL axe à la fois. Il y a l'axe principal (par défaut horizontal) et l'axe secondaire, perpendiculaire au premier.

Étape 3 : deux propriétés, deux axes différents

justify-content contrôle la distribution le long de l'axe principal, tandis que align-items contrôle l'alignement sur l'axe secondaire. Confondre les deux est l'erreur n°1 des débutants.

PropriétéAgit surAvec flex-direction: row
justify-contentAxe principalHorizontal
align-itemsAxe secondaireVertical

Piège fréquent

Avec flex-direction: column, les rôles s'inversent : justify-content devient vertical et align-items devient horizontal. Si un centrage ne fonctionne pas comme attendu, vérifiez toujours en premier la valeur de flex-direction.

Étape 4 : le piège classique de flex-direction: column

Si "centrer horizontalement" ne fonctionne pas avec justify-content, c'est probablement que flex-direction: column a inversé les rôles des deux axes — l'axe principal devient alors vertical, et les deux propriétés échangent leur rôle apparent.

Étape 5 : comprendre flex: 1 plutôt que l'apprendre par cœur

Une fois les axes clairs, voyons le raccourci le plus utilisé. flex: 1 combine trois réglages : la capacité à grandir, la capacité à rétrécir, et une taille de départ. Il dit essentiellement "ignore ta taille naturelle, prends une part égale de l'espace disponible" — très utile pour des colonnes de largeur égale.

Étape 6 : le piège de order

Il reste un dernier piège à connaître. Réordonner visuellement des éléments avec order est tentant, mais cela ne change JAMAIS l'ordre réel dans le DOM : un lecteur d'écran ou la navigation au clavier avec Tab continue de suivre l'ordre du code source.

Prérequis

Cette leçon suppose que vous êtes à l'aise avec le box model (padding, margin, border) vu précédemment ; Flexbox s'appuie directement sur ces notions pour distribuer l'espace entre les éléments.

Et ensuite ?

Une fois ces bases posées, la prochaine étape consiste à voir les cas concrets où Flexbox devient plus subtil : calcul de taille, imbrication, patterns responsive.

Commandes & code

Flexbox fondamentaux

Aligner et distribuer des éléments sur un seul axe, principal ou secondaire.

css
.conteneur {
    display: flex;
    /* dès display: flex, tous les enfants directs deviennent des "flex items" */
}
css
/* Axe principal : direction et distribution */
.conteneur {
    display: flex;
    flex-direction: row;             /* défaut : gauche -> droite */
    flex-direction: row-reverse;
    flex-direction: column;          /* de haut en bas -- axe principal devient vertical */
    flex-direction: column-reverse;

    justify-content: flex-start;     /* défaut : items collés au début */
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;  /* premier au bord, dernier au bord, espace égal entre */
    justify-content: space-around;   /* espace égal AUTOUR de chaque item */
    justify-content: space-evenly;   /* espace strictement égal partout, y compris aux bords */
}
css
/* Axe secondaire (perpendiculaire) */
.conteneur {
    display: flex;
    align-items: stretch;     /* défaut : items étirés à la hauteur du conteneur */
    align-items: flex-start;
    align-items: flex-end;
    align-items: center;
    align-items: baseline;    /* aligne sur la ligne de base du texte -- utile en row */
}

/* Retour à la ligne */
.conteneur {
    display: flex;
    flex-wrap: nowrap;   /* défaut : tout sur une ligne, items rétrécis si besoin */
    flex-wrap: wrap;      /* passe à la ligne si pas assez de place */

    align-content: center; /* distribue les LIGNES entre elles (nécessite flex-wrap: wrap) */
    gap: 16px;              /* espace entre items, remplace les margins bricolées */
    gap: 16px 24px;         /* row-gap column-gap */
}
css
/* Contrôle individuel d'un item */
.item {
    flex-grow: 0;    /* défaut : ne grandit pas au-delà de sa taille de base */
    flex-shrink: 1;  /* défaut : peut rétrécir si le conteneur manque de place */
    flex-basis: auto; /* taille de départ avant distribution de l'espace restant */

    flex: 1;          /* raccourci = flex-grow:1 flex-shrink:1 flex-basis:0 -> occupe l'espace dispo à égalité */
    flex: 0 0 200px;   /* taille fixe de 200px, ne grandit ni ne rétrécit */
    flex: 1 1 300px;   /* commence à 300px, s'étire/rétrécit ensuite */

    align-self: flex-end; /* override align-items pour cet item précis */
    order: -1;             /* réordonne visuellement SANS toucher au DOM (impact accessibilité à surveiller) */
}
html
<!-- Exemple réaliste : barre de navigation -->
<nav class="navbar">
    <div class="logo">Technologik</div>
    <ul class="liens">
        <li><a href="/">Accueil</a></li>
        <li><a href="/cours">Cours</a></li>
    </ul>
    <button class="cta">S'inscrire</button>
</nav>
css
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
}
.liens {
    display: flex;
    gap: 24px;
    list-style: none;
}

Résumé

  • justify-content agit sur l'axe principal, align-items sur l'axe secondaire.
  • flex: 1 est le raccourci le plus courant pour un item qui occupe l'espace restant.
  • gap remplace avantageusement les margins négatives historiques entre items.
  • order ne change que l'ordre visuel : le DOM (et l'ordre de tabulation) reste inchangé.

Exercices pratiques

1 disponible
1

Mission : une navbar accessible qui trompe le clavier

Objectif : Corriger un centrage flex mal ciblé et un usage de order qui casse la navigation au clavier.

Contexte

Sur navbar.css, .navbar est en display: flex; flex-direction: column; (un choix temporaire pour un futur menu mobile) et garde justify-content: center; en espérant centrer le logo, les liens et le bouton horizontalement. Résultat : ils sont centrés verticalement mais restent collés à gauche. Par ailleurs, un développeur a ajouté order: -1; sur le bouton .cta pour l'afficher visuellement en premier, à gauche du logo, sans toucher au HTML.

Résoudre l’exercice →