Chapitre 510 | Alignement horizontal (justify-content)

Alignement horizontal (justify-content)

Propriétés Flexbox : Alignement horizontal (justify-content)

La propriété justify-content détermine l’alignement des enfants le long de l’axe principal (horizontal par défaut, sauf si flex-direction est réglé sur column).

Valeurs que nous allons voir :

1. flex-start (valeur par défaut) : Les enfants s’alignent au début de l’axe.
2. flex-end : Les enfants s’alignent à la fin de l’axe.
3. center : Les enfants sont centrés sur l’axe.
4. space-between : Les enfants sont répartis avec un espace égal entre eux, mais aucun espace aux extrémités.
5. space-around : Les enfants sont répartis avec un espace égal autour d’eux.
6. space-evenly : Les enfants sont répartis avec un espace strictement égal entre et autour d’eux.

Exemple 1 : justify-content: flex-start; (par défaut)

HTML

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

CSS

.flex-container {
  display: flex;
  justify-content: flex-start; /* Aligne les enfants au début de l’axe principal */
  background-color: lightblue;
  gap: 10px; /* Espacement entre les enfants */
  padding: 10px;
}

.box {
  background-color: lightcoral;
  padding: 20px;
  border: 1px solid darkred;
}

---

Exemple 2 : justify-content: flex-end;

CSS (ajustement seulement)

.flex-container {
  justify-content: flex-end; /* Aligne les enfants à la fin de l’axe principal */
}

---

Exemple 3 : justify-content: center;

CSS (ajustement seulement)

.flex-container {
  justify-content: center; /* Centre les enfants horizontalement */
}

---

Exemple 4 : justify-content: space-between;

CSS (ajustement seulement)

.flex-container {
  justify-content: space-between; /* Ajoute un espace égal entre les enfants, sans espace aux extrémités */
}

---

Exemple 5 : justify-content: space-around;

CSS (ajustement seulement)

.flex-container {
  justify-content: space-around; /* Ajoute un espace égal autour de chaque enfant */
}

---

Exemple 6 : justify-content: space-evenly;

CSS (ajustement seulement)

.flex-container {
  justify-content: space-evenly; /* Ajoute un espace strictement égal entre et autour de chaque enfant */
}

---

Comparaison des valeurs de justify-content :

1. flex-start : Tous les enfants au début.
2. flex-end : Tous les enfants à la fin.
3. center : Tous les enfants au centre.
4. space-between : Espacement seulement entre les enfants.
5. space-around : Espacement autour de chaque enfant (double espace entre les enfants par rapport aux extrémités).
6. space-evenly : Espacement strictement égal entre et autour de chaque enfant.

Toolbox :

Attention : si vous utilisez vos Toolbox sur CodePen, pensez à l’enregistrement automatique en cours. Créez d’abord votre PEN principal, puis forkez-le. Renommez immédiatement le PEN issu du fork avant de commencer à travailler dessus. Cela évitera toute confusion ou modification involontaire de votre PEN principal.

Un fork sur CodePen est une copie d’un PEN existant que vous pouvez modifier sans affecter l’original. Pour forker :

Ouvrez le PEN à copier.
Cliquez sur « Fork » (dans le menu du haut).
Renommez immédiatement votre nouveau PEN pour le différencier.