Module 2La mise en page
Chapitre 9 sur 15
Flexbox
Aligner et répartir des éléments sur une ligne ou une colonne avec Flexbox.
- ≈ 175 min
- 7 leçons
- 15 vidéos
- 4 exercices
Module 2La mise en page
Chapitre 9 sur 15
Aligner et répartir des éléments sur une ligne ou une colonne avec Flexbox.
Objectifs
Avec ce chapitre, tu sauras…
flex-direction ;justify-content, align-items, align-content et align-self ;flex-wrap et espacer avec gap ;flex-grow, flex-shrink, flex-basis et flex ;Flexbox (Flexible Box Layout) est le module CSS qui a révolutionné la mise en page. Ce qui demandait des astuces compliquées (centrer verticalement, aligner des blocs côte à côte, répartir l'espace) se fait désormais en deux ou trois lignes. Flexbox est fait pour les mises en page à une dimension : une ligne ou une colonne d'éléments.
Leçon 1
<ul class="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Projets</a></li>
<li><a href="#">Contact</a></li>
</ul>.menu {
display: flex; /* les li se mettent côte à côte */
gap: 1rem; /* un espace entre chaque élément */
list-style: none;
padding: 0;
}<div style="display:flex;gap:10px;font-family:Inter,sans-serif;font-size:9pt;background:#eef4fb;padding:8px">
<div style="background:#2f5bc4;color:#fff;padding:5px 10px">Accueil</div><div style="background:#2f5bc4;color:#fff;padding:5px 10px">Projets</div><div style="background:#2f5bc4;color:#fff;padding:5px 10px">Contact</div>
</div>Vidéo · À regarder
FRTuto FlexBox - Tuto CSS pour apprendre et comprendre flexbox en 12 minutes
front-end · YouTube
L'introduction et display: flex dans un tutoriel court et très visuel. Ce tutoriel de 12 minutes sera ton fil rouge pour tout le chapitre.
Vidéo · À regarder
FRTutoriel Complet pour POSITIONNER les Éléments de votre Site avec les FLEXBOX !
FrenchCoder - Développement Web · YouTube
Leçon 2
| Valeur | Axe principal | Les éléments se suivent… |
|---|---|---|
row (défaut) | horizontal | de gauche à droite |
row-reverse | horizontal | de droite à gauche |
column | vertical |
Leçon 3
| Valeur | Effet |
|---|---|
flex-start (défaut) | groupés au début |
flex-end | groupés à la fin |
center | groupés au centre |
space-between | premier au début, dernier à la fin, espace égal entre eux |
space-around | espace égal autour de chacun (demi-espace aux bords) |
Leçon 4
| Valeur | Effet (en row) |
|---|---|
stretch (défaut) | les éléments s'étirent sur toute la hauteur du conteneur |
flex-start | alignés en haut |
flex-end | alignés en bas |
center | centrés verticalement |
baseline | alignés sur la ligne de base de leur texte |
Leçon 5
| Propriété | Rôle | Exemple |
|---|---|---|
flex-wrap | nowrap (défaut), wrap, wrap-reverse | flex-wrap: wrap; |
flex-flow | raccourci de flex-direction + flex-wrap | flex-flow: row wrap; |
gap | espace entre les éléments (lignes et colonnes) | gap: 1rem 2rem; |
align-content |
Leçon 6
| Propriété | Rôle | Défaut |
|---|---|---|
flex-grow | part de l'espace libre que l'élément prend pour grandir | 0 (ne grandit pas) |
flex-shrink | capacité à rétrécir quand la place manque | 1 (rétrécit) |
flex-basis | taille de départ avant répartition | auto (la taille de son contenu) |
flex |
Leçon 7
Vidéo · À regarder
FRTuto FlexBox - Tuto CSS pour apprendre et comprendre flexbox en 12 minutes
front-end · YouTube
Vidéo · À regarder
FRFormation CSS, tuto complet pour démarrer
L'instant Code · YouTube
1display: flex s'applique…
2En flex-direction: row, justify-content aligne…
3Pour centrer un élément horizontalement et verticalement dans un conteneur flex :
4Par défaut, les éléments flexibles…
5flex: 1 sur trois éléments signifie…
6En flex-direction: column, align-items: center centre…
L'essentiel du chapitre
display: flex sur le conteneur ; ses enfants directs deviennent flexibles. Mise en page à une dimension.flex-direction) → justify-content ; axe secondaire → align-items.justify-content: center; align-items: center;.flex-wrap: wrap pour passer à la ligne, gap pour espacer, align-content pour les lignes.flex: 1 (parts égales), flex: 0 0 260px (taille fixe), flex: 1 1 280px (cartes), align-self, order.margin-left: auto pousse un élément au bout ; flex-direction: column + flex: 1 sur main pour un footer en bas.| de haut en bas |
column-reverse | vertical | de bas en haut |
Vidéo · À regarder
FRTutoriel Complet pour POSITIONNER les Éléments de votre Site avec les FLEXBOX !
FrenchCoder - Développement Web · YouTube
Vidéo · À regarder
FRTuto FlexBox - Tuto CSS pour apprendre et comprendre flexbox en 12 minutes
front-end · YouTube
space-evenly |
| espaces strictement égaux, bords compris |
Vidéo · À regarder
FRTuto FlexBox - Tuto CSS pour apprendre et comprendre flexbox en 12 minutes
front-end · YouTube
Vidéo · À regarder
FRTutoriel Complet pour POSITIONNER les Éléments de votre Site avec les FLEXBOX !
FrenchCoder - Développement Web · YouTube
Intuition
stretch, la magie des colonnes égales
Vidéo · À regarder
FRTuto FlexBox - Tuto CSS pour apprendre et comprendre flexbox en 12 minutes
front-end · YouTube
Vidéo · À regarder
FRTutoriel Complet pour POSITIONNER les Éléments de votre Site avec les FLEXBOX !
FrenchCoder - Développement Web · YouTube
| répartit les lignes sur l'axe secondaire (si plusieurs lignes) |
align-content: space-between; |
Vidéo · À regarder
FRTuto FlexBox - Tuto CSS pour apprendre et comprendre flexbox en 12 minutes
front-end · YouTube
Vidéo · À regarder
FRTutoriel Complet pour POSITIONNER les Éléments de votre Site avec les FLEXBOX !
FrenchCoder - Développement Web · YouTube
raccourci grow shrink basis |
0 1 auto |
order | ordre d'affichage (le plus petit en premier) | 0 |
align-self | align-items pour un seul élément | auto |
| Écriture | Équivaut à | Signification |
|---|---|---|
flex: 1 | 1 1 0% | « partage l'espace à parts égales avec les autres flex: 1 » |
flex: 2 | 2 1 0% | « prends deux fois plus de place qu'un flex: 1 » |
flex: auto | 1 1 auto | « grandis à partir de ta taille naturelle » |
flex: none | 0 0 auto | « garde ta taille, ne grandis ni ne rétrécis » |
flex: 1 1 250px | — | « pars de 250 px, puis grandis ou rétrécis » |
Vidéo · À regarder
FRTuto FlexBox - Tuto CSS pour apprendre et comprendre flexbox en 12 minutes
front-end · YouTube
Vidéo · À regarder
FRTutoriel Complet pour POSITIONNER les Éléments de votre Site avec les FLEXBOX !
FrenchCoder - Développement Web · YouTube
Vidéo · À regarder
ENCSS Full Course for Beginners | Complete All-in-One Tutorial | 11 Hours
Dave Gray · YouTube
Un conteneur flex de 900px contient trois éléments : A (flex: 1), B (flex: 2), C (flex: 0 0 300px), sans gap. Quelle est la largeur de chaque élément ?
Qu'est-ce que les flexbox, et la liste des propriétés : un tutoriel plus long et plus détaillé, en complément.
Flexbox raisonne avec deux axes. L'axe principal (main axis) est la direction dans laquelle les éléments se suivent : horizontal par défaut. L'axe secondaire (cross axis) lui est perpendiculaire. justify-content aligne sur l'axe principal, align-items sur l'axe secondaire. Si tu changes la direction, les deux axes s'échangent.
Tableau: flex-direction
Tableau: Les valeurs de justify-content
Tableau: Les valeurs de align-items
.centre {
display: flex;
justify-content: center; /* axe principal : horizontal */
align-items: center; /* axe secondaire : vertical */
min-height: 100vh;
}Par défaut, les éléments flexibles restent sur une seule ligne, quitte à rétrécir ou à déborder. flex-wrap: wrap leur permet de passer à la ligne.
Tableau: Les propriétés de retour à la ligne
Ces propriétés s'écrivent sur les enfants, pas sur le conteneur.
Tableau: Taille et ordre des éléments flexibles
.entete {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
.entete ul {
display: flex;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}.entete .connexion {
margin-left: auto; /* absorbe tout l'espace libre à sa gauche */
}.cartes {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.carte {
flex: 1 1 280px; /* 280px minimum, puis elles partagent la place */
}body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1; /* main grandit et pousse le footer en bas */
}Le raccourci flex, puis l'astuce margin: auto avec flex utilisée dans l'exemple 2.
Termine les 24 niveaux de Flexbox Froggy. Note les trois niveaux qui t'ont posé le plus de difficultés et la propriété qui les résolvait.
Mets en page l'en-tête de ton CV avec Flexbox : ton nom à gauche, le menu à droite, alignés verticalement au centre. Les liens du menu sont côte à côte avec un espace de 1.5rem.
Crée trois cartes de projets côte à côte, de même hauteur, séparées de 1.5rem, qui passent automatiquement à la ligne quand l'écran est trop étroit (largeur minimale de 260px chacune). Le bouton « Voir le projet » de chaque carte doit être collé en bas de la carte, même si les textes n'ont pas la même longueur.
L'axe principal et l'axe secondaire : sept minutes sur la notion la plus importante de Flexbox. Si tu ne dois regarder qu'un segment, c'est celui-ci.
flex-direction en moins d'une minute.
<div style="font-family:Inter,sans-serif;font-size:8pt">
<div style="display:flex;justify-content:center;gap:6px;background:#eef4fb;padding:6px;margin-bottom:6px"><div style="background:#2f5bc4;color:#fff;padding:4px 10px">1</div><div style="background:#2f5bc4;color:#fff;padding:4px 10px">2</div><div style="background:#2f5bc4;color:#fff;padding:4px 10px">3</div></div>
<div style="display:flex;justify-content:space-between;background:#eef4fb;padding:6px"><div style="background:#2f5bc4;color:#fff;padding:4px 10px">1</div><div style="background:#2f5bc4;color:#fff;padding:4px 10px">2</div><div style="background:#2f5bc4;color:#fff;padding:4px 10px">3</div></div>
</div>justify-content et ses valeurs, visualisées une par une.
justify-content en version détaillée.
Parce que align-items vaut stretch par défaut, trois cartes côte à côte dans un conteneur flex ont automatiquement la même hauteur, même si l'une a plus de texte. C'était presque impossible à obtenir avant Flexbox.
align-items, puis une explication de la différence entre justify-content et align-items : regarde bien la partie qui commence à 3:55.
align-items en version détaillée.
flex-wrap, align-content et gap, l'un après l'autre.
flex-wrap et le raccourci flex-flow en détail.
Tableau: Les raccourcis flex à connaître
.page {
display: flex;
gap: 2rem;
}
.barre-laterale {
flex: 0 0 260px; /* toujours 260px */
}
.contenu {
flex: 1; /* tout l'espace restant */
}<div style="display:flex;gap:8px;font-family:Inter,sans-serif;font-size:8pt;background:#eef4fb;padding:6px">
<div style="flex:0 0 90px;background:#17306e;color:#fff;padding:14px 6px">barre latérale (fixe)</div><div style="flex:1;background:#2f5bc4;color:#fff;padding:14px 6px">contenu : prend tout l'espace restant</div>
</div>align-self, order, flex-grow, flex-shrink, flex-basis et flex : cinq minutes pour toutes les propriétés des éléments.
Les propriétés des éléments en version longue (22 minutes) : order, flex-grow, flex-shrink, flex-basis, flex et align-self. Idéal si flex-grow et flex-shrink restent flous après le segment précédent.
Flexbox dans la formation de L'instant Code : quatre minutes de révision avec un autre exemple.
Le chapitre « Flexbox » de Dave Gray (anglais) : 24 minutes de révision complète.