04 - Mise en page avec Flexbox

Jusqu’à présent, nous avons vu comment structurer une page (HTML) et la styliser (CSS).

Nous allons maintenant apprendre à organiser les éléments sur la page.

Pour cela, nous allons utiliser un outil très puissant : Flexbox.

1. Pourquoi utiliser Flexbox ?

Par défaut, les éléments HTML s’empilent les uns en dessous des autres.

Flexbox permet de :

• Aligner des éléments horizontalement
• Gérer les espacements automatiquement
• Créer des mises en page simples et efficaces

2. Activer Flexbox

Pour utiliser Flexbox, il suffit d’ajouter :

.container {
    display: flex;
}

Tous les éléments à l’intérieur deviennent alors des éléments flex.

3. Axe principal

Par défaut, les éléments sont alignés sur une ligne (horizontalement).

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

On peut aussi les empiler :

flex-direction: column;

4. Alignement horizontal

La propriété justify-content permet d’aligner les éléments sur l’axe principal.

justify-content: center;
justify-content: space-between;
justify-content: space-around;

• center : centré
• space-between : espace entre les éléments
• space-around : espace autour

5. Alignement vertical

La propriété align-items permet d’aligner verticalement.

align-items: center;

6. Exemple complet

<div class="container">
    <div>Bloc 1</div>
    <div>Bloc 2</div>
    <div>Bloc 3</div>
</div>

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

7. À retenir

• Flexbox sert à organiser les éléments
• display: flex active le mode
• justify-content gère l’horizontal
• align-items gère le vertical
• flex-direction change l’orientation

Conclusion

Vous savez maintenant organiser une page proprement.

Dans le prochain chapitre, nous verrons comment adapter un site aux mobiles.

Navigation dans la série