Flexbox : layouts flexibles et responsive

Introduction

Flexbox (Flexible Box Layout) est un système de layout CSS moderne qui permet de créer des mises en page flexibles et responsives sans utiliser des floats ou des grilles complexes. C'est un outil indispensable pour tout développeur web.

Flexbox fonctionne en deux niveaux : le conteneur (parent) et les éléments (enfants). Seul le conteneur reçoit display: flex.

Display: flex — Activer Flexbox

Pour utiliser Flexbox, appliquez display: flex au conteneur parent :

.container {
    display: flex;
}

C'est tout ce qu'il faut pour transformer vos éléments enfants en éléments flexibles. Par défaut :

• Les enfants s'alignent en ligne (horizontalement)
• Ils prennent la hauteur du conteneur
• Ils conservent leur largeur naturelle

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

<style>
.container {
    display: flex;
    gap: 10px;
}
.box {
    flex: 1;
    padding: 20px;
    background: #3498db;
    color: white;
}
</style>

Flex-direction — Direction du layout

Contrôle comment les enfants s'alignent. Par défaut c'est row (horizontal) :

.container-row {
    display: flex;
    flex-direction: row;
}

.container-column {
    display: flex;
    flex-direction: column;
}

Justify-content — Alignement horizontal

Contrôle l'alignement des enfants le long de l'axe principal (horizontal par défaut) :

flex-start — Aligné au début (défaut)

.container {
    display: flex;
    justify-content: flex-start;
}
/* Tous les éléments sont à gauche */

flex-end — Aligné à la fin

.container {
    display: flex;
    justify-content: flex-end;
}
/* Tous les éléments sont à droite */

center — Centré

.container {
    display: flex;
    justify-content: center;
}
/* Les éléments sont au centre */

space-between — Espace égal ENTRE les éléments

.container {
    display: flex;
    justify-content: space-between;
}
/* Premier à gauche, dernier à droite, les autres répartis */

space-around — Espace égal AUTOUR des éléments

.container {
    display: flex;
    justify-content: space-around;
}
/* Espace égal avant/après chaque élément */

space-evenly — Espace parfaitement égal partout

.container {
    display: flex;
    justify-content: space-evenly;
}
/* Espace parfaitement égal entre tous les éléments ET les bords */

Align-items — Alignement vertical

Contrôle l'alignement des enfants le long de l'axe transversal (vertical par défaut) :

stretch — Tire les éléments (défaut)

.container {
    display: flex;
    align-items: stretch;
    height: 200px;
}
/* Les enfants prennent la hauteur totale */

flex-start — En haut

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

flex-end — En bas

.container {
    display: flex;
    align-items: flex-end;
}

center — Centré verticalement (très utile !)

.container {
    display: flex;
    align-items: center;
    height: 300px;
}
/* Centres tous les enfants verticalement */

baseline — Aligné sur la baseline du texte

.container {
    display: flex;
    align-items: baseline;
}

Flex-wrap — Retour à la ligne

Contrôle si les éléments restent sur une ligne ou passent à la ligne suivante :

nowrap — Pas de retour à la ligne (défaut)

.container {
    display: flex;
    flex-wrap: nowrap;
}
/* Les éléments restent sur une ligne, même s'ils dépassent */

wrap — Retour à la ligne si nécessaire

.container {
    display: flex;
    flex-wrap: wrap;
}
/* Les éléments passent à la ligne suivante s'il n'y a pas de place */

wrap-reverse — Retour à la ligne inverse

.container {
    display: flex;
    flex-wrap: wrap-reverse;
}
/* Les lignes s'ajoutent vers le haut */

Exemples pratiques complets

Exemple 1 : Navigation horizontale avec logo et menu

<nav class="navbar">
    <div class="logo">Logo</div>
    <div class="menu">
        <a href="#">Accueil</a>
        <a href="#">Produits</a>
        <a href="#">Contact</a>
    </div>
</nav>

<style>
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #333;
    color: white;
}

.menu {
    display: flex;
    gap: 20px;
}

.menu a {
    color: white;
    text-decoration: none;
}
</style>

Exemple 2 : Galerie d'images responsive

<div class="gallery">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
</div>

<style>
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.gallery img {
    flex: 1 1 300px; /* min 300px, puis grandit */
    height: 300px;
    object-fit: cover;
}
</style>

Exemple 3 : Centrage parfait

<div class="modal">
    <div class="modal-content">
        <h2>Bienvenue !</h2>
        <p>Modal centré au milieu</p>
    </div>
</div>

<style>
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background: white;
    padding: 40px;
    border-radius: 8px;
}
</style>

Conclusion

Flexbox est la solution moderne pour les layouts. Maîtrisez ces propriétés et vous résoudrez 90% de vos problèmes de positionnement.