4. Flexbox : Maîtriser la mise en page flexible

Owen, devant son écran, explique à Eva :
« Avec Flexbox, tu peux créer des mises en page complexes sans te casser la tête. C’est comme un super pouvoir pour organiser tes éléments ! »

Eva sourit : « Ça a l’air génial, mais comment ça marche exactement ? »

Rostand ajoute : « On va tout te montrer, étape par étape. »

---

Objectif de cette leçon

• Comprendre les concepts de base de Flexbox.
• Maîtriser les propriétés clés : display: flex, flex-direction, justify-content, align-items, flex-wrap.
• Apprendre à créer des layouts flexibles et réactifs.

---

Qu’est-ce que Flexbox ?

Flexbox est un module CSS conçu pour faciliter la création de mises en page flexibles et réactives. Il permet de distribuer l’espace entre les éléments et de les aligner de manière dynamique, même lorsque la taille de l’écran change.

---

Les propriétés principales de Flexbox

Propriété	Description	Exemple
display: flex	Active Flexbox sur un conteneur	display: flex;
flex-direction	Définit la direction des éléments (ligne ou colonne)	flex-direction: row;
justify-content	Aligne les éléments sur l’axe principal	justify-content: space-between;
align-items	Aligne les éléments sur l’axe secondaire	align-items: center;
flex-wrap	Permet aux éléments de passer à la ligne	flex-wrap: wrap;
flex-grow	Définit comment un élément s’étend	flex-grow: 1;
flex-shrink	Définit comment un élément se réduit	flex-shrink: 0;
flex-basis	Définit la taille initiale d’un élément	flex-basis: 200px;

---

Flexbox en action : Exemple pratique

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Flexbox en action</title>
        <style>
            .conteneur {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 20px;
                border: 1px solid #ccc;
            }
            .element {
                width: 100px;
                height: 100px;
                background-color: #f0f0f0;
                border: 1px solid #333;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="conteneur">
            <div class="element">1</div>
            <div class="element">2</div>
            <div class="element">3</div>
        </div>
    </body>
</html>

---

Exercices pratiques

Exercice 1 : Créer une barre de navigation

1. Crée un conteneur avec display: flex.
2. Ajoute des éléments de navigation (par exemple, “Accueil”, “À propos”, “Contact”).
3. Utilise justify-content pour espacer les éléments uniformément.
4. Utilise align-items pour centrer les éléments verticalement.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Barre de navigation</title>
        <style>
            .navbar {
                display: flex;
                justify-content: space-around;
                align-items: center;
                background-color: #333;
                padding: 10px;
            }
            .navbar a {
                color: white;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <div class="navbar">
            <a href="#">Accueil</a>
            <a href="#">À propos</a>
            <a href="#">Contact</a>
        </div>
    </body>
</html>

Exercice 2 : Mise en page en colonnes

1. Crée un conteneur avec display: flex et flex-direction: column.
2. Ajoute trois éléments avec des hauteurs différentes.
3. Utilise align-items pour aligner les éléments au centre horizontalement.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Mise en page en colonnes</title>
        <style>
            .conteneur {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 20px;
                border: 1px solid #ccc;
            }
            .element {
                width: 200px;
                height: 50px;
                background-color: #f0f0f0;
                border: 1px solid #333;
                margin: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="conteneur">
            <div class="element">1</div>
            <div class="element">2</div>
            <div class="element">3</div>
        </div>
    </body>
</html>

Exercice 3 : Flexbox réactif

1. Crée un conteneur avec display: flex et flex-wrap: wrap.
2. Ajoute plusieurs éléments avec une largeur fixe.
3. Redimensionne la fenêtre du navigateur pour voir comment les éléments s’adaptent.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8" />
        <title>Flexbox réactif</title>
        <style>
            .conteneur {
                display: flex;
                flex-wrap: wrap;
                padding: 20px;
                border: 1px solid #ccc;
            }
            .element {
                width: 150px;
                height: 150px;
                background-color: #f0f0f0;
                border: 1px solid #333;
                margin: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="conteneur">
            <div class="element">1</div>
            <div class="element">2</div>
            <div class="element">3</div>
            <div class="element">4</div>
            <div class="element">5</div>
            <div class="element">6</div>
        </div>
    </body>
</html>

---

Ce qu’Eva retient

• Flexbox est un outil puissant pour créer des mises en page flexibles et réactives.
• Les propriétés justify-content et align-items sont essentielles pour aligner les éléments.
• Utiliser flex-wrap permet de gérer les éléments sur plusieurs lignes ou colonnes.

---