Flexbox en CSS : Guide Complet

Conteneur, enfants, centrage, navbar, cartes responsive — tout maîtriser avec des exemples concrets

10
Sections
20+
Exemples
2026
Mis à jour
📚 Navigation

🏠 Hub Programmation
🎨 Cours HTML & CSS
🔲 CSS Grid
🎯 Centrer un élément

📋 Sommaire
1. Le principe de Flexbox
6. Grille de cartes responsive
2. Propriétés du conteneur
7. 6 patterns à connaître
3. Propriétés des enfants
8. Erreurs fréquentes
4. Centrer un élément
9. Flexbox vs Grid
5. Créer une navbar
10. Questions fréquentes

SECTION 01

Le principe de Flexbox

📐 Conteneur + Items

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.


class=« conteneur »>
class=« item »>A

class=« item »>B

class=« item »>C

 

 

/* CSS */
.conteneur

🧭 Les deux axes
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)

↔️ flex-direction
.conteneur
↔️ justify-content (axe principal)
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
↕️ align-items (axe secondaire)
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
🔄 flex-wrap + gap
/* flex-wrap : passer à la ligne */
.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)

📏 flex-grow, flex-shrink, flex-basis
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
/* Raccourci : flex: grow shrink basis */
.item /* flex: 1 1 0% — prend l'espace dispo */
.item /* taille fixe 200px, ne bouge pas */
.item /* 2x plus d'espace que flex: 1 */
🎯 align-self + order
/* align-self : aligner UN item différemment */
.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

🎯 3 lignes pour centrer parfaitement
/* Centrage horizontal + vertical */
.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 06

Grille de cartes responsive

.cards

.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

Flexbox est-il supporté par tous les navigateurs ?
Oui. Flexbox est supporté par tous les navigateurs modernes depuis 2015. Plus besoin de préfixes -webkit-flex. La propriété gap en Flexbox est supportée partout depuis 2021.
Peut-on imbriquer des conteneurs Flexbox ?
Oui, c'est très courant. Une navbar est un conteneur flex dont les liens sont eux-mêmes dans un conteneur flex. Un enfant flex peut aussi être un conteneur flex pour ses propres enfants.
Différence entre align-items et align-content ?
align-items aligne les items à l'intérieur de chaque ligne. align-content gère l'espace entre les lignes avec flex-wrap: wrap. Si tu n'as qu'une seule ligne, align-content n'a aucun effet.
Comment faire un footer qui reste en bas de la page ?
Le « sticky footer » : body puis main . Le contenu principal prend tout l'espace restant, le footer reste naturellement en bas.

📚 Fiches liées

🔲 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