📘 Chapitre 3 – Flexbox

1. 🎯 Objectif pédagogique

Maîtriser le système de mise en page Flexbox pour organiser les éléments dans un conteneur de manière flexible, responsive et alignée.

2. 📚 Concepts abordés

  • Propriété display: flex
  • Axe principal et axe secondaire
  • Propriétés du conteneur : justify-content, align-items, flex-direction, flex-wrap
  • Propriétés des éléments enfants : flex, align-self, order
  • Alignements et répartitions d’espace

3. 🧠 Explication théorique

Flexbox (Flexible Box Layout) est un modèle de disposition qui simplifie la création de mises en page flexibles et centrées. Le conteneur principal doit avoir display: flex, ce qui transforme ses enfants en éléments flexibles.

Exemple de conteneur flexible :

.container {
  display: flex;
  justify-content: space-between; /* Espace égal entre les éléments */
  align-items: center;            /* Alignement vertical */
}

Propriétés principales :

  • flex-direction : définit l’axe principal (row, column).
  • justify-content : aligne sur l’axe principal (flex-start, center, space-between, space-around).
  • align-items : aligne sur l’axe secondaire (flex-start, center, stretch).
  • flex (sur les enfants) : contrôle la largeur ou la proportion de l’espace.

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un conteneur contenant trois blocs colorés alignés horizontalement et répartis avec des espaces égaux.

Arborescence du projet :

mon_projet/
├── index.html
└── style.css

Étape 1 : Structure HTML 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Flexbox</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
    </div>
  </body>
</html>

Étape 2 : Styles CSS 

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100vh;
  background-color: #f4f4f4;
}

.box {
  width: 80px;
  height: 80px;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 1.5rem;
}

5. 🧾 Résumé et points-clés

  • Flexbox simplifie la gestion des alignements horizontaux et verticaux.
  • justify-content agit sur l’axe principal, align-items sur l’axe secondaire.
  • flex et order permettent de contrôler la taille et l’ordre des éléments enfants.