Flexbox CSS : Le Guide Ultime pour Maîtriser les Layouts Flexibles

Introduction à CSS Flexbox

Le module CSS Flexbox (Flexible Box Layout) est devenu le standard incontournable pour créer des mises en page flexibles et responsives en CSS. Que vous aligniez des éléments dans une barre de navigation, centrez du contenu verticalement, ou construisiez une grille de cartes, Flexbox est votre allié principal.

Ce guide complet vous emmène des bases aux techniques avancées, avec des exemples concrets que vous pourrez utiliser immédiatement dans vos projets.

Concepts fondamentaux de Flexbox

Le conteneur flex et les éléments flex

Flexbox fonctionne sur un modèle parent-enfant :

• Conteneur flex (flex container) : l'élément parent auquel on applique display: flex
• Éléments flex (flex items) : les enfants directs du conteneur flex

/* Le conteneur flex */
.container {
    display: flex; /* ou inline-flex */
}

/* Les enfants deviennent automatiquement des flex items */

    
1
    
2
    
3

Les deux axes de Flexbox

• Axe principal (main axis) : défini par flex-direction, c'est l'axe le long duquel les items sont disposés
• Axe transversal (cross axis) : perpendiculaire à l'axe principal

Propriétés du conteneur flex

flex-direction : définir l'axe principal

.container {
    display: flex;
    flex-direction: row;            /* Défaut : gauche à droite */
    flex-direction: row-reverse;    /* Droite à gauche */
    flex-direction: column;         /* Haut en bas */
    flex-direction: column-reverse; /* Bas en haut */
}

flex-wrap : gérer le retour à la ligne

.container {
    flex-wrap: nowrap;       /* Défaut : tout sur une ligne */
    flex-wrap: wrap;         /* Retour à la ligne si nécessaire */
    flex-wrap: wrap-reverse; /* Retour à la ligne inversé */
}

/* Raccourci flex-flow */
.container {
    flex-flow: row wrap; /* direction + wrap en une propriété */
}

justify-content : alignement sur l'axe principal

.container {
    justify-content: flex-start;    /* Début (défaut) */
    justify-content: flex-end;      /* Fin */
    justify-content: center;        /* Centre */
    justify-content: space-between; /* Espacement entre les items */
    justify-content: space-around;  /* Espacement autour des items */
    justify-content: space-evenly;  /* Espacement égal partout */
}

align-items : alignement sur l'axe transversal

.container {
    align-items: stretch;    /* Défaut : étire les items */
    align-items: flex-start; /* Aligné en haut */
    align-items: flex-end;   /* Aligné en bas */
    align-items: center;     /* Centré verticalement */
    align-items: baseline;   /* Aligné sur la ligne de base du texte */
}

align-content : alignement des lignes (avec flex-wrap)

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;    /* Lignes en haut */
    align-content: flex-end;      /* Lignes en bas */
    align-content: center;        /* Lignes au centre */
    align-content: space-between; /* Espacement entre les lignes */
    align-content: space-around;  /* Espacement autour des lignes */
    align-content: stretch;       /* Défaut : lignes étirées */
}

gap : espacement entre les items

.container {
    display: flex;
    gap: 1rem;          /* Espacement uniforme */
    gap: 1rem 2rem;     /* row-gap column-gap */
    row-gap: 1rem;      /* Espacement vertical uniquement */
    column-gap: 2rem;   /* Espacement horizontal uniquement */
}

Propriétés des éléments flex

flex-grow : capacité à grandir

.item { flex-grow: 0; } /* Défaut : ne grandit pas */
.item { flex-grow: 1; } /* Prend l'espace disponible */

/* Exemple : sidebar fixe + contenu flexible */
.sidebar { flex-grow: 0; width: 250px; }
.content { flex-grow: 1; } /* Prend tout l'espace restant */

flex-shrink : capacité à rétrécir

.item { flex-shrink: 1; } /* Défaut : peut rétrécir */
.item { flex-shrink: 0; } /* Ne rétrécit jamais */

flex-basis : taille de base

.item { flex-basis: auto; }  /* Défaut : taille du contenu */
.item { flex-basis: 200px; } /* Taille initiale de 200px */
.item { flex-basis: 25%; }   /* 25% du conteneur */

Le raccourci flex

/* flex: grow shrink basis */
.item { flex: 0 1 auto; }   /* Défaut */
.item { flex: 1; }           /* Équivalent à flex: 1 1 0% */
.item { flex: auto; }        /* Équivalent à flex: 1 1 auto */
.item { flex: none; }        /* Équivalent à flex: 0 0 auto */
.item { flex: 0 0 200px; }   /* Ne change pas, reste à 200px */

align-self : alignement individuel

.container { align-items: flex-start; }

.item-special {
    align-self: center;   /* Cet item est centré, les autres en haut */
    align-self: flex-end;  /* Cet item en bas */
    align-self: stretch;   /* Cet item étiré */
}

order : changer l'ordre d'affichage

.item { order: 0; }  /* Défaut : ordre du HTML */
.item-first { order: -1; }  /* Passe en premier */
.item-last { order: 99; }   /* Passe en dernier */

Patterns Flexbox courants et pratiques

Centrage parfait (le Saint Graal du CSS)

.center-everything {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Barre de navigation responsive

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}
.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}
@media (max-width: 768px) {
    .navbar { flex-wrap: wrap; }
    .nav-links {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }
}

Footer collé en bas de page (sticky footer)

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main { flex: 1; } /* Prend tout l'espace disponible */
footer { flex-shrink: 0; }

Grille de cartes flexible

.card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.card {
    flex: 1 1 300px; /* Minimum 300px, s'étend si possible */
    max-width: 400px;
}

Layout sidebar + contenu

.layout {
    display: flex;
    gap: 2rem;
}
.sidebar {
    flex: 0 0 280px; /* Largeur fixe */
}
.main-content {
    flex: 1; /* Prend le reste */
    min-width: 0; /* Évite le débordement */
}
@media (max-width: 768px) {
    .layout { flex-direction: column; }
    .sidebar { flex-basis: auto; }
}

Comparaison Flexbox vs Grid

Pièges courants et solutions

• Débordement de texte : ajoutez min-width: 0 aux flex items contenant du texte long.
• Images qui ne rétrécissent pas : utilisez min-width: 0 et max-width: 100% sur les images dans un flex item.
• Hauteur inégale des cartes : align-items: stretch (par défaut) égalise les hauteurs.
• Gap non supporté : pour les anciens navigateurs, utilisez des marges avec un sélecteur négatif sur le conteneur.

Conclusion

CSS Flexbox est un outil puissant et polyvalent qui devrait faire partie de votre arsenal quotidien. Maîtrisez les propriétés du conteneur et des items, comprenez les deux axes, et vous pourrez créer pratiquement n'importe quel layout avec élégance et simplicité.

Chez Tourak Digital, nous utilisons Flexbox et Grid de manière complémentaire pour des interfaces modernes et performantes. Confiez-nous votre projet web.