Chapitre 8 : Flexbox en CSS

1. Qu’est-ce que Flexbox ?

Flexbox (Flexible Box Layout) est un modèle de disposition CSS conçu pour organiser les éléments de manière efficace, même lorsqu’ils ont des tailles variables ou que l’espace est limité.

Il fonctionne sur deux axes :

• l’axe principal (main axis)
• l’axe secondaire (cross axis)

2. Activer Flexbox

On commence par activer le modèle Flexbox sur un conteneur avec display: flex :

.container {
  display: flex;
}

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

3. Propriétés du conteneur

• flex-direction : row (par défaut), row-reverse, column, column-reverse
• justify-content : aligne les éléments sur l’axe principal (flex-start, center, space-between…)
• align-items : aligne les éléments sur l’axe secondaire (stretch, center, flex-end…)
• gap : espace entre les éléments (supporté dans les navigateurs modernes)

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}

4. Propriétés des éléments flexibles (enfants)

• flex-grow : permet à l’élément de grandir
• flex-shrink : permet à l’élément de rétrécir
• flex-basis : taille initiale de l’élément
• flex : raccourci pour les trois propriétés ci-dessus
• align-self : aligne un seul élément différemment des autres

.item {
  flex: 1;
}

5. Exemple complet

<style>
  .container {
    display: flex;
    gap: 1rem;
  }
  .box {
    flex: 1;
    padding: 20px;
    background: lightblue;
  }
</style>

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>