Introduction à Flexbox¶

Qu'est-ce que Flexbox ?¶

Flexbox (Flexible Box Layout) est un système de mise en page CSS qui permet d'aligner et de distribuer des éléments dans un conteneur, même quand leurs dimensions sont inconnues ou dynamiques.

Avant Flexbox (la galère) :

/* Centrer quelque chose = cauchemar */
.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Avec Flexbox (facile) :

.conteneur {
  display: flex;
  justify-content: center;
  align-items: center;
}

Le modèle Flexbox : conteneur et items¶

Conteneur flex (parent)¶

L'élément qui contient les items et définit comment ils se comportent.

.conteneur {
  display: flex; /* Active Flexbox */
}

Items flex (enfants)¶

Les éléments directs à l'intérieur du conteneur flex.

<div class="conteneur">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Les axes : principal et secondaire¶

Flexbox fonctionne sur deux axes :

Axe principal (main axis) : Direction dans laquelle les items sont disposés.
Axe secondaire (cross axis) : Perpendiculaire à l'axe principal.

See the Pen DEMO - Flexbox by TIM Montmorency (@tim-momo) on CodePen.

Propriétés essentielles du conteneur¶

`flex-direction` - Direction du flux¶

Définit la direction de l'axe principal.

.conteneur {
  display: flex;
  flex-direction: row; /* ← gauche à droite (défaut) */
}

Valeurs possibles :

row : horizontal, gauche → droite (défaut)
row-reverse : horizontal, droite → gauche
column : vertical, haut → bas
column-reverse : vertical, bas → haut

/* Navigation horizontale */
.nav {
  display: flex;
  flex-direction: row;
}

/* Menu vertical */
.sidebar {
  display: flex;
  flex-direction: column;
}

`justify-content` - Alignement sur l'axe principal¶

Distribue l'espace entre/autour des items sur l'axe principal.

.conteneur {
  display: flex;
  justify-content: center;
}

Valeurs principales :

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

See the Pen DEMO - Flexbox justify-content by TIM Montmorency (@tim-momo) on CodePen.

`align-items` - Alignement sur l'axe secondaire¶

Aligne les items perpendiculairement à l'axe principal.

.conteneur {
  display: flex;
  align-items: center;
}

Valeurs principales :

align-items: stretch
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

See the Pen DEMO - Flexbox justify-content by TIM Montmorency (@tim-momo) on CodePen.

`gap` - Espacement entre les items¶

Crée un espace uniforme entre tous les items (plus simple que margin).

.conteneur {
  display: flex;
  gap: 16px; /* 16px entre chaque item */
}

/* Gap différent horizontal vs vertical */
.conteneur {
  display: flex;
  gap: 20px 10px; /* 20px vertical, 10px horizontal */
}

Avant gap (la galère) :

.item {
  margin-right: 16px;
}
.item:last-child {
  margin-right: 0; /* Enlever marge du dernier */
}

Avec gap (facile) :

.conteneur {
  display: flex;
  gap: 16px;
}

`flex-wrap` - Passage à la ligne¶

Permet aux items de passer à la ligne suivante si l'espace manque.

.conteneur {
  display: flex;
  flex-wrap: nowrap; /* défaut - tout sur une ligne */
}

Valeurs :

nowrap : Tous les items sur une seule ligne (défaut)
wrap : Les items passent à la ligne si nécessaire
wrap-reverse : Comme wrap, mais en sens inverse

See the Pen DEMO - Flexbox align-items by TIM Montmorency (@tim-momo) on CodePen.

Exemple pratique complet¶

/* Navigation horizontale classique */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 16px;
}

/* Galerie de cartes responsive */
.galerie {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

/* Centrer parfaitement un élément */
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Layout vertical (sidebar) */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

Vous voulez apprendre en jouant?¶

À propos de Flexbox Zombies

Notez que cet exercice n'est pas requis pour le cours Web2. Vous pouvez le faire par vous même mais il ne sera pas utilisé dans le cadre de ce cours.

Flexbox Zombies: pour apprendre CSS Flexbox en tuant des zombies !