Chapitre 505 | Direction des enfants (flex-direction)

Direction des enfants (flex-direction)

Nous allons explorer la propriété flex-direction, qui détermine la direction dans laquelle les enfants d’un conteneur Flexbox sont alignés.

Valeurs que nous allons voir :

1. row (valeur par défaut) : Les enfants sont alignés horizontalement, de gauche à droite.
2. row-reverse : Les enfants sont alignés horizontalement, mais dans l’ordre inverse (de droite à gauche).
3. column : Les enfants sont alignés verticalement, de haut en bas.
4. column-reverse : Les enfants sont alignés verticalement, mais dans l’ordre inverse (de bas en haut).

---

Exemple 1 : flex-direction: row; (par défaut)

HTML

<div class="flex-container">
  <div class="box red">Élément 1</div>
  <div class="box green">Élément 2</div>
  <div class="box yellow">Élément 3</div>
</div>

CSS

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}

.flex-container {
  display: inline-flex; /* Active le mode Flexbox */
  flex-direction: row; /* Aligne horizontalement (par défaut) */
  background-color: lightblue; /* Aide à visualiser le conteneur */
  gap: 10px; /* Espacement entre les enfants */
  padding: 10px;
}

.box {
  padding: 20px;
  border: 1px solid darkred;
}

---

Exemple 2 : flex-direction: row-reverse;

CSS (ajustement seulement)

/* veuillez noter que si cela n'est pas précisé, par defaut la valeur est à : row */
.flex-container {
  flex-direction: row; /* Aligne horizontalement (par défaut) */
}

/* ici la cascade fait son effet */
.flex-container {
  flex-direction: row-reverse; /* Inverse l'ordre horizontal */
}

Résultat

Les enfants s’alignent toujours horizontalement, mais dans l’ordre inverse (Élément 3, Élément 2, Élément 1).

---

Exemple 3 : flex-direction: column;

CSS (ajustement seulement)

.flex-container {
  flex-direction: column; /* Aligne verticalement de haut en bas */
}

Résultat

Les enfants s’empilent verticalement, de haut en bas.

---

Exemple 4 : flex-direction: column-reverse;

CSS (ajustement seulement)

.flex-container {
  flex-direction: column-reverse; /* Aligne verticalement de bas en haut */
}

Résultat

Les enfants s’empilent verticalement, mais dans l’ordre inverse (Élément 3 en haut, Élément 1 en bas).