Flexbox en CSS : Guide Complet
Conteneur, enfants, centrage, navbar, cartes responsive — tout maîtriser avec des exemples concrets
SECTION 01
Le principe de Flexbox
Flexbox fonctionne avec un conteneur (le parent) et des items (les enfants directs). Quand tu appliques display: flex au parent, tous ses enfants se placent automatiquement en ligne.
/* CSS */
.conteneur
| Axe | Direction par défaut | Contrôlé par |
|---|---|---|
| Axe principal (main axis) | Horizontal (→) | justify-content |
| Axe secondaire (cross axis) | Vertical (↓) | align-items |
L'axe principal change si tu utilises flex-direction: column — dans ce cas, l'axe principal devient vertical et l'axe secondaire horizontal.
SECTION 02
Propriétés du conteneur (parent)
| Valeur | Effet |
|---|---|
| flex-start | Tous à gauche (défaut) |
| flex-end | Tous à droite |
| center | Centrés |
| space-between | Répartis, premier et dernier collés aux bords |
| space-around | Espaces égaux autour de chaque item |
| space-evenly | Espaces strictement égaux partout |
| Valeur | Effet |
|---|---|
| stretch | Items prennent toute la hauteur (défaut) |
| flex-start | Collés en haut |
| flex-end | Collés en bas |
| center | Centrés verticalement |
| baseline | Alignés sur la ligne de base du texte |
.conteneur
/* gap : espace ENTRE les items (pas autour) */
.conteneur
gap est la façon moderne de gérer l'espacement — plus besoin de margins. Supporté partout depuis 2021.
SECTION 03
Propriétés des enfants (items)
| Propriété | Rôle | Défaut |
|---|---|---|
| flex-grow | Combien l'item grandit pour remplir l'espace libre | 0 |
| flex-shrink | Combien l'item rétrécit si l'espace manque | 1 |
| flex-basis | Taille de base avant répartition | auto |
.item /* flex: 1 1 0% — prend l'espace dispo */
.item /* taille fixe 200px, ne bouge pas */
.item /* 2x plus d'espace que flex: 1 */
.special
/* order : changer l'ordre d'affichage */
.premier /* apparaît en premier */
.dernier /* apparaît en dernier */
SECTION 04
Centrer un élément avec Flexbox
.parent
/* Alternative : margin auto sur l'enfant */
.parent
.enfant /* centré dans les deux axes */
Pas de transform: translate(-50%, -50%), pas de margin bizarre — juste 3 propriétés. Voir aussi notre fiche Centrer un élément en CSS.
SECTION 05
Créer une navbar avec Flexbox
.navbar
.nav-links
space-between est la clé : il pousse le logo à gauche et les liens à droite automatiquement, peu importe le nombre de liens.
SECTION 06
Grille de cartes responsive
.card
Chaque carte fait au minimum 300px. S'il y a de l'espace, elles grandissent. S'il n'y a plus de place, elles passent à la ligne. Zéro media query.
⚠️ La dernière carte d'une rangée incomplète s'étire sur toute la largeur. Si tu veux éviter ça, utilise CSS Grid avec auto-fit + minmax().
SECTION 07
6 patterns Flexbox à connaître
| Pattern | Code CSS | Usage |
|---|---|---|
| Centrer | display:flex; justify-content:center; align-items:center | Modales, login |
| Navbar | display:flex; justify-content:space-between; align-items:center | Header de site |
| Footer sticky | body main | Footer en bas |
| Sidebar + contenu | .sidebar .content | Dashboards |
| Grille de cartes | flex-wrap:wrap; gap:24px; .card | Listing produits |
| Boutons alignés | display:flex; gap:12px; justify-content:flex-end | Actions formulaire |
SECTION 08
Erreurs fréquentes
| Erreur | Problème | Solution |
|---|---|---|
| Oublier flex-wrap: wrap | Tout sur une ligne, items débordent | Ajouter flex-wrap: wrap |
| Margin au lieu de gap | Espaces indésirables sur les bords | Utiliser gap |
| Centrer sans hauteur | align-items: center ne fait rien | Ajouter min-height au parent |
| Confondre align-items et align-content | Résultats imprévisibles multi-lignes | align-items = 1 ligne, align-content = multi-lignes |
| flex: 1 sur des images | Images déformées | Ajouter object-fit: cover |
SECTION 09
Flexbox vs Grid
| Critère | Flexbox | Grid |
|---|---|---|
| Dimension | 1D (une ligne OU colonne) | 2D (lignes ET colonnes) |
| Idéal pour | Navbar, boutons, alignements | Layouts de page, galleries |
| Contenu dicte la taille ? | Oui — items déterminent leur taille | Non — la grille impose |
| Responsive sans media query | flex-wrap: wrap | auto-fit + minmax() |
| Dernière carte solitaire | S'étire sur toute la largeur | Reste à sa taille dans la grille |
Règle simple : Flexbox pour les composants (navbar, boutons, tags). Grid pour les layouts de page et grilles de contenu. Les deux se combinent.
SECTION 10
Questions fréquentes
🔲 CSS Grid
🎯 Centrer un élément
🏗️ Balises sémantiques
📌 Position CSS
🎨 Cours HTML & CSS
🏠 Hub Programmation
Flexbox CSS — Guide complet avec exemples
Référence : MDN Flexbox