Prérequis
- Niveau : bases HTML/CSS (sélecteurs, modèle de boîte).
- Outils : VS Code + extension Live Server, navigateur moderne (DevTools recommandés).
- Lecture utile : balises HTML essentielles et première page HTML5.
- Temps estimé : 1 h pour parcourir, 3 h pour faire les 10 exercices.
Pourquoi Flexbox ?
Avant 2017, centrer verticalement un bloc en CSS demandait des hacks : position: absolute, marges négatives, tableaux… Flexbox a balayé tout ça. C’est aujourd’hui l’outil standard pour aligner les éléments sur un seul axe (ligne ou colonne). Pour des grilles 2D, on lui préfère CSS Grid.
Flexbox : l’outil d’alignement indispensable
Flexbox résout les problèmes d’alignement et de distribution d’espace que CSS classique rendait pénibles. Voici les propriétés essentielles puis 10 exercices concrets pour les maîtriser.
Les propriétés du conteneur (parent)
Voici la mise en pratique pour Les propriétés du conteneur (parent). Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.conteneur {
display: flex;
/* Direction des éléments */
flex-direction: row; /* Horizontal (défaut) */
flex-direction: column; /* Vertical */
flex-direction: row-reverse; /* Horizontal inversé */
/* Retour à la ligne */
flex-wrap: nowrap; /* Tout sur 1 ligne (défaut) */
flex-wrap: wrap; /* Retour à la ligne si nécessaire */
/* Alignement horizontal (axe principal) */
justify-content: flex-start; /* À gauche */
justify-content: center; /* Centré */
justify-content: flex-end; /* À droite */
justify-content: space-between; /* Espace entre les éléments */
justify-content: space-around; /* Espace autour */
justify-content: space-evenly; /* Espace égal partout */
/* Alignement vertical (axe secondaire) */
align-items: stretch; /* Étirer (défaut) */
align-items: flex-start; /* En haut */
align-items: center; /* Centré verticalement */
align-items: flex-end; /* En bas */
/* Espace entre les éléments */
gap: 20px;
}Les propriétés des éléments (enfants)
Voici la mise en pratique pour Les propriétés des éléments (enfants). Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.enfant {
/* Grandir pour remplir l'espace */
flex-grow: 1; /* Prend l'espace disponible */
/* Rétrécir si nécessaire */
flex-shrink: 0; /* Ne rétrécit pas */
/* Taille de base */
flex-basis: 200px;
/* Raccourci : grow shrink basis */
flex: 1; /* flex: 1 1 0 */
flex: 0 0 300px; /* Fixe à 300px */
/* Ordre d'affichage */
order: 2; /* Apparaît en 2ème */
/* Alignement individuel */
align-self: center;
}Exercice 1 : Centrer parfaitement un élément
Voici la mise en pratique pour Exercice 1 : Centrer parfaitement un élément. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
/* Le saint graal du CSS : centrage parfait */
.conteneur {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* C'est tout ! 3 lignes au lieu de hacks compliqués */Exercice 2 : Navbar avec logo à gauche et liens à droite
Voici la mise en pratique pour Exercice 2 : Navbar avec logo à gauche et liens à droite. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.navbar {
display: flex;
justify-content: space-between; /* Logo ← → Liens */
align-items: center;
padding: 15px 30px;
}
.nav-links {
display: flex;
gap: 25px;
list-style: none;
}Exercice 3 : Grille de cartes responsive
Voici la mise en pratique pour Exercice 3 : Grille de cartes responsive. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* Minimum 300px, grandit si possible */
/* Résultat : 1 colonne mobile, 2 tablette, 3+ desktop */
}Exercice 4 : Footer avec 3 colonnes
Voici la mise en pratique pour Exercice 4 : Footer avec 3 colonnes. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.footer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 30px;
padding: 40px;
}
.footer-col {
flex: 1 1 200px; /* 3 colonnes, minimum 200px chacune */
}Exercice 5 : Sidebar fixe + contenu flexible
Voici la mise en pratique pour Exercice 5 : Sidebar fixe + contenu flexible. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.layout {
display: flex;
}
.sidebar {
flex: 0 0 250px; /* Fixe à 250px, ne grandit ni rétrécit */
}
.contenu {
flex: 1; /* Prend tout l'espace restant */
padding: 20px;
}Exercice 6 : Boutons de formulaire alignés
Voici la mise en pratique pour Exercice 6 : Boutons de formulaire alignés. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.form-actions {
display: flex;
justify-content: flex-end; /* Boutons à droite */
gap: 10px;
}
/* Variante : un bouton à gauche, les autres à droite */
.form-actions .btn-retour {
margin-right: auto; /* Pousse tout le reste à droite */
}Exercice 7 : Card avec contenu poussé en bas
Voici la mise en pratique pour Exercice 7 : Card avec contenu poussé en bas. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-body {
flex: 1; /* Prend l'espace disponible */
}
.card-footer {
margin-top: auto; /* Toujours en bas de la carte */
}Exercice 8 : Liste horizontale scrollable
Voici la mise en pratique pour Exercice 8 : Liste horizontale scrollable. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.scroll-horizontal {
display: flex;
gap: 15px;
overflow-x: auto;
padding: 10px;
scroll-snap-type: x mandatory;
}
.scroll-item {
flex: 0 0 280px; /* Largeur fixe, pas de rétrécissement */
scroll-snap-align: start;
}Exercice 9 : Avatar + texte alignés
Voici la mise en pratique pour Exercice 9 : Avatar + texte alignés. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.profil {
display: flex;
align-items: center;
gap: 15px;
}
.avatar {
flex: 0 0 50px;
width: 50px;
height: 50px;
border-radius: 50%;
}
.profil-info {
flex: 1;
}
.profil-info h4 { margin: 0; }
.profil-info p { margin: 0; color: #666; font-size: 14px; }Exercice 10 : Layout Holy Grail
Voici la mise en pratique pour Exercice 10 : Layout Holy Grail. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
/* Header - [Sidebar | Contenu | Aside] - Footer */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header, footer {
flex: 0 0 auto;
}
.middle {
display: flex;
flex: 1;
}
.sidebar { flex: 0 0 200px; }
.contenu { flex: 1; }
.aside { flex: 0 0 200px; }
@media (max-width: 768px) {
.middle { flex-direction: column; }
.sidebar, .aside { flex: 0 0 auto; }
}Aide-mémoire visuel
| Besoin | Propriété |
|---|---|
| Centrer horizontalement | justify-content: center |
| Centrer verticalement | align-items: center |
| Espacer les éléments | justify-content: space-between |
| Retour à la ligne | flex-wrap: wrap |
| Taille fixe d’un enfant | flex: 0 0 250px |
| Enfant qui remplit l’espace | flex: 1 |
| Pousser un élément | margin-left: auto |
Erreurs fréquentes
« Mes éléments ne s’alignent pas »
Cause : oubli de display: flex sur le parent. Les propriétés flex-*, justify-content, align-items n’agissent que si le parent est un conteneur flex.
Solution : inspectez le parent dans les DevTools et vérifiez que display: flex est bien appliqué.
Confusion axes : justify-content ne fait rien quand on passe en colonne
Cause : justify-content agit sur l’axe principal, qui change avec flex-direction. En row, c’est l’horizontal ; en column, c’est le vertical.
Solution : retenir : axe principal = direction de flex-direction ; axe secondaire = perpendiculaire.
Une image écrase ses voisins en flex
Cause : par défaut, les éléments flex peuvent rétrécir (flex-shrink: 1) et les images grandes débordent.
Solution : ajoutez flex-shrink: 0 sur l’image (ou min-width: 0 sur le conteneur texte voisin).
« gap ne marche pas »
Cause : très ancien navigateur (Safari < 14.1, antérieur à 2021).
Solution : en 2026 (informations vérifiées en avril 2026, susceptibles d’évoluer), gap est universel. Si vous devez supporter de très vieux navigateurs, retombez sur margin.
Exercice final
🎯 Défi : Reproduisez ces 10 layouts
Créez un fichier HTML unique contenant les 10 exercices. Chaque exercice dans une section séparée. Le tout doit être responsive. Utilisez uniquement Flexbox (pas de Grid, pas de float).
flex-gap : enfin un espacement propre
Voici la mise en pratique pour flex-gap : enfin un espacement propre. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.barre-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}Depuis Safari 14.1 (avril 2021), tous les navigateurs majeurs supportent gap en contexte Flex. Une seule ligne remplace les vieilles règles de marges. Couverture caniuse 96%+ en 2026.
flex-wrap : passer à la ligne sans media query
Voici la mise en pratique pour flex-wrap : passer à la ligne sans media query. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.galerie {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.galerie > * { flex: 1 1 240px; }flex: 1 1 240px : largeur de base 240 px, autoriser à grandir, autoriser à rétrécir. Avec quatre cartes, vous obtenez automatiquement une ligne de 4, 3, 2 ou 1 selon la largeur.
Alignement : justify, align, place
Voici la mise en pratique pour Alignement : justify, align, place. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
.hero {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
}Centrer un élément en horizontal et vertical tient en quatre lignes. La propriété raccourci place-content: center équivaut à justify-content: center; align-content: center;.
Flex vs Grid : quand choisir l’un
- Une dimension (une ligne OU une colonne) : Flexbox. Barre de navigation, rangée de boutons.
- Deux dimensions : Grid. Galerie, dashboard, layout de page complet.
Cas concret : la barre de navigation (Flexbox), le contenu avec sidebar et zone principale (Grid), chaque carte interne (Flexbox). Les deux outils sont complémentaires.
Pattern Holy Grail
Voici la mise en pratique pour Pattern Holy Grail. Le bloc ci-dessous est copiable directement dans votre projet, lisible ligne par ligne. Lisez-le une première fois en survol pour repérer la structure générale, puis adaptez les noms de variables, identifiants et valeurs à votre contexte avant de l’exécuter en local.
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
display: flex;
gap: 1rem;
}
main > aside { flex: 0 0 220px; }
main > article { flex: 1; }Le flex: 1 sur main pousse le footer en bas même si le contenu est court (Sticky Footer).
Debugger Flexbox dans DevTools
- Inspectez un élément flex.
- À côté de
display: flex, cliquez sur le badgeflex. - Un overlay affiche les axes, les zones libres, l’effet de
justify-content. - Modifiez les propriétés en direct dans Styles.
Accessibilité : ordre visuel vs ordre logique
Flexbox autorise order: -1 et flex-direction: row-reverse. Mais un lecteur d’écran lit l’ordre du DOM, pas l’ordre visuel. Si la navigation au clavier (Tab) saute dans un ordre qui ne correspond pas à ce que l’utilisateur voit, vous cassez l’expérience pour les personnes en situation de handicap. Règle d’or : écrivez le HTML dans l’ordre logique, utilisez Flexbox pour la présentation.
Adaptation au contexte ouest-africain : performance, équipe, marché
Pour un développeur ou une PME basée à Dakar, Abidjan, Bamako, Cotonou, Lomé, Ouagadougou, Niamey ou Conakry qui livre des sites web ou applications custom, trois adaptations pèsent sur le succès des projets. Premièrement, la connectivité 4G inégale impose de réduire le poids des pages au strict nécessaire. Deuxièmement, le profil typique des développeurs disponibles localement est majoritairement formé sur du JavaScript moderne et du PHP. Troisièmement, le coût en FCFA des services cloud doit être anticipé : Hetzner CX22 à 4 500 FCFA/mois reste imbattable pour démarrer, Cloudflare Pages gratuit pour les sites statiques, Backblaze B2 à 6 USD/TB/mois pour les sauvegardes.
Tester sur appareils réels
Plus important que tous les outils synthétiques, tester son site sur un Android d’entrée de gamme (Galaxy A03 à 200 EUR neuf, Tecno Spark, Itel A60) avec une connexion 4G locale dégradée donne le seul verdict qui compte. À lire ensuite, voir le guide media queries responsive.
Pratiques avancées et outils complémentaires
Au-delà des patterns présentés, plusieurs outils complètent une maîtrise sérieuse. Premier axe : automatiser la qualité via une pipeline CI (GitHub Actions, GitLab CI) qui exécute tests, linting et audit avant chaque déploiement. Deuxième axe : monitorer en production avec Sentry pour les erreurs JavaScript ou New Relic pour les performances applicatives. Troisième axe : documenter les décisions importantes dans un dossier docs/adr/ avec format simple (contexte, décision, conséquences).
Ressources francophones pour approfondir
Plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs reste la documentation de référence. FreeCodeCamp propose des parcours de 300+ heures. Grafikart.fr offre des centaines de tutoriels vidéos en français. Pour la pratique, contribuer à un projet open source via GitHub est l’investissement le plus payant à moyen terme.
Pratiques avancées et outils complémentaires
Au-delà des patterns présentés, plusieurs outils complètent une maîtrise sérieuse. Premier axe : automatiser la qualité via une pipeline CI (GitHub Actions, GitLab CI) qui exécute tests, linting et audit avant chaque déploiement. Deuxième axe : monitorer en production avec Sentry pour les erreurs JavaScript ou New Relic pour les performances applicatives. Troisième axe : documenter les décisions importantes dans un dossier docs/adr/ avec format simple (contexte, décision, conséquences).
Ressources francophones pour approfondir
Plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs reste la documentation de référence. FreeCodeCamp propose des parcours de 300+ heures. Grafikart.fr offre des centaines de tutoriels vidéos en français. Pour la pratique, contribuer à un projet open source via GitHub est l’investissement le plus payant à moyen terme.
Erreurs courantes à éviter en production
Trois patterns reviennent dans les projets web mal exécutés et coûtent cher à corriger plus tard. Premier pattern : copier-coller de code Stack Overflow sans comprendre le contexte d’origine. Deuxième pattern : ignorer les warnings de la console — chaque warning est un signal qui mérite d’être lu. Troisième pattern : ne pas tester sur de vrais appareils. DevTools simule mais ne remplace pas un test physique sur un Android d’entrée de gamme avec une 4G dégradée. Documenter chaque décision technique majeure dans un fichier ADR prend dix minutes et fait gagner des heures lors d’un incident ou d’un audit.
Pour explorer plus loin
- CSS Grid Layout pour des mises en page modernes — pour les grilles 2D
- Rendre votre site responsive avec les media queries
- Variables CSS (custom properties)
- Animations CSS sans JavaScript
- Référence officielle : MDN — CSS Flexible Box Layout
- Mémo visuel : CSS-Tricks — A Complete Guide to Flexbox
- Jeu : Flexbox Froggy (24 niveaux pour pratiquer)