Tutoriel CSS : Maîtriser Flexbox en 10 exercices pratiques

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)

.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)

.element {
    /* 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

/* 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

.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

.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

.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

.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

.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

.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

.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

.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

/* 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

Exercice final