Chapitre 7 : Flexbox - Mise en page flexible

Maîtrisez le module Flexbox pour créer des mises en page flexibles et réactives.

1. Introduction à Flexbox

Flexbox (Flexible Box Layout) est un module CSS conçu pour distribuer l'espace entre les éléments d'un conteneur et aligner ceux-ci efficacement, même quand leur taille est dynamique ou inconnue.

.container {
                          display: flex;
                        }
                    

2. Axe principal et axe secondaire

Axe principal : direction des éléments (ligne ou colonne)
Axe transversal : perpendiculaire à l'axe principal

Direction par défaut : de gauche à droite (ligne horizontale)

3. Propriétés du conteneur flex

3.1 `flex-direction`

row (par défaut), row-reverse
column, column-reverse

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

3.2 `justify-content` (alignement horizontal)

flex-start, flex-end, center
space-between, space-around, space-evenly

.container {
                          justify-content: space-between;
                        }
                    

3.3 `align-items` (alignement vertical)

stretch (défaut), center, flex-start, flex-end, baseline

.container {
                          align-items: center;
                        }
                    

3.4 `flex-wrap`

Contrôle si les éléments peuvent passer à la ligne :

.container {
                          flex-wrap: wrap;
                        }
                    

3.5 `gap`

Ajoute un espacement entre les éléments :

.container {
                          gap: 20px;
                        }
                    

4. Propriétés des éléments flexibles

4.1 `order`

Modifie l'ordre d'affichage :

4.2 `flex-grow`

Détermine la croissance de l'élément dans l'espace disponible :

.element {
                          flex-grow: 1;
                        }
                    

4.3 `flex-shrink`

Détermine le taux de rétrécissement :

.element {
                          flex-shrink: 1;
                        }
                    

4.4 `flex-basis`

Base de dimensionnement initiale :

.element {
                          flex-basis: 200px;
                        }
                    

4.5 Propriété raccourcie `flex`

Exemple : flex: 1 1 200px;

5. Exemples courants

Centrer un élément

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

Créer une grille fluide

.row {
                          display: flex;
                          flex-wrap: wrap;
                          gap: 1rem;
                        }
                        

.col {
                          flex: 1 1 200px;
                        }
                    

6. Bonnes pratiques

Utiliser flex pour les mises en page horizontales simples
Préférer gap à margin entre les éléments
Garder en tête l'axe principal et l'axe secondaire

7. À éviter

Empiler des margin inutiles avec gap
Oublier le flex-wrap quand on a beaucoup d'éléments
Utiliser Flexbox pour des structures complexes (préférer Grid)

8. Exercice pratique

Objectif : Créer une ligne de 3 cartes de service alignées avec flexbox.

Consignes :

Créer une .ligne contenant 3 éléments .carte
Utiliser display: flex et gap
Les cartes doivent être centrées horizontalement

HTML :

<div class="ligne">
                          <div class="carte">Service 1</div>
                          <div class="carte">Service 2</div>
                          <div class="carte">Service 3</div>
</div>

CSS :

.ligne {
                          display: flex;
                          justify-content: center;
                          gap: 1em;
                        }
                        

.carte {
                          background-color: #f0f0f0;
                          padding: 1em;
                          flex: 1 1 200px;
                          text-align: center;
                        }
                    

9. À retenir

Flexbox facilite les alignements horizontaux et verticaux
Les propriétés justify-content et align-items sont essentielles
Flexbox est parfait pour des mises en page simples et adaptatives