Flexbox : aligner sur un axe

Première leçon du cours Mise en page responsive (Flexbox, Grid), en accès libre : environ 15 minutes, 3 exercices et 3 questions de quiz. C'est la leçon de base du catalogue ; dans l'espace étudiant, elle est réécrite pour ton profil.

Objectifs

Créer un conteneur flex et comprendre axe principal et axe secondaire
Aligner et répartir des éléments avec justify-content et align-items
Espacer des éléments avec gap

Flexbox Alignement des boîtes

Aligner un logo à gauche et un menu à droite, centrer un bloc verticalement, espacer régulièrement des boutons : ces tâches étaient pénibles avant Flexbox. Aujourd’hui, quelques lignes suffisent.

Flexbox est un modèle de mise en page à une dimension : il organise des éléments sur une ligne ou sur une colonne.

Conteneur et éléments

On active Flexbox sur le parent :

<nav class="barre">
  <a class="logo" href="/">Rando&amp;Co</a>
  <ul class="menu">...</ul>
</nav>

.barre {
  display: flex;   /* .barre devient un conteneur flex */
}

Ses enfants directs (.logo et .menu) deviennent des éléments flex : ils se placent côte à côte, sur une ligne, et prennent la hauteur de la ligne. Les petits-enfants ne sont pas concernés : pour aligner les liens dans .menu, il faut aussi mettre .menu en display: flex.

Les deux axes

L’axe principal est défini par flex-direction : row (par défaut, horizontal, dans le sens de lecture) ou column (vertical). Les variantes row-reverse et column-reverse inversent le sens.
L’axe secondaire est perpendiculaire.

Retenir ce principe évite la confusion classique : justify-content agit toujours sur l’axe principal, align-items sur l’axe secondaire. Si vous passez en column, leurs effets « tournent ».

Répartir : justify-content

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

Valeur	Effet sur l’axe principal
`flex-start` (défaut)	groupés au début
`center`	groupés au centre
`flex-end`	groupés à la fin
`space-between`	premier et dernier collés aux bords, espace égal entre
`space-around` / `space-evenly`	espaces répartis autour / égaux partout

Aligner : align-items

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

Valeur	Effet sur l’axe secondaire
`stretch` (défaut)	étirés sur toute la hauteur
`center`	centrés
`flex-start` / `flex-end`	en haut / en bas
`baseline`	alignés sur la ligne de base du texte

Un élément peut déroger avec align-self : .logo { align-self: flex-start; }.

Espacer : gap

.menu { display: flex; gap: 1.5rem; }

gap ajoute un espace entre les éléments, jamais sur les bords. C’est plus simple et plus fiable que des marges sur chaque élément.

Recettes à connaître

/* Barre de navigation : logo à gauche, menu à droite, centrés verticalement */
.barre { display: flex; justify-content: space-between; align-items: center; }
.menu  { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }

/* Centrage parfait d'un bloc dans une zone */
.hero { display: flex; justify-content: center; align-items: center; min-height: 60vh; }

/* Pousser un élément à droite : une marge automatique absorbe l'espace libre */
.panier { margin-left: auto; }

L’inspecteur des navigateurs propose un badge flex à côté du conteneur : cliquez dessus pour visualiser les axes et les espaces. C’est le meilleur moyen de comprendre ce qui se passe.

Exercices

Les solutions et les tests restent sur le serveur. Dans l'espace étudiant, ton code est exécuté et corrigé, et le tuteur donne des indices avant la solution.

CodeDifficulté 1Page HTML dans le navigateur2 indices

Barre de navigation

Mettez .barre en flex pour que le logo soit à gauche et le menu à droite (space-between), centrés verticalement. Mettez aussi .menu en flex avec un gap de 16px.

<style>
  .menu { list-style: none; margin: 0; padding: 0; }
  /* vos règles */
</style>
<nav class="barre">
  <a class="logo" href="/">Logo</a>
  <ul class="menu">
    <li><a href="/">Accueil</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

CodeDifficulté 2Page HTML dans le navigateur2 indices

Centrage parfait

Centrez le .message horizontalement et verticalement dans .zone (hauteur 300px) avec Flexbox. Puis passez .zone en flex-direction: column et ajoutez le bouton sous le message, toujours centrés, avec un gap de 12px.

<style>
  .zone { height: 300px; border: 1px dashed #999; }
  /* vos règles */
</style>
<div class="zone">
  <p class="message">Votre panier est vide</p>
  <a class="bouton" href="/catalogue">Voir le catalogue</a>
</div>

QCMDifficulté 21 indice

Les axes en colonne

Avec flex-direction: column, quelle propriété centre les éléments horizontalement ?

justify-content: center
align-items: center
text-align: center

Quiz de fin de leçon

Sur quel élément écrit-on display: flex ?

Sur chaque enfant
Sur le conteneur parent
Sur body uniquement

Quelle valeur de justify-content colle le premier et le dernier élément aux bords ?

space-around
space-between
center

Quel est l’avantage de gap par rapport aux marges ?

Il ajoute de l'espace aussi sur les bords
Il espace uniquement entre les éléments, sans calcul
Il fonctionne seulement en Grid

La suite du cours

Flexbox : tailles flexibles et retour à la ligne15 min

CSS Grid : colonnes et lignes20 min

CSS Grid : zones nommées et placement15 min

Media queries et approche mobile first20 min

Responsive moderne : clamp(), container queries et images adaptatives20 min

Mise en page responsive (Flexbox, Grid) · Intermédiaire · 3 h 45