1. Glossaire
  2. Axe principal

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Axe principal

L'axe principal d'une flexbox est déterminé par la direction définie dans la propriété CSS flex-direction. Il y a 4 valeurs possibles pour flex-direction. Ce sont :

  • row (ligne)
  • row-reverse
  • column (colonne)
  • column-reverse

Si vous choisissez row ou row-reverse votre axe principal passera alors le long de la ligne dans le sens de la direction définie.

Dans cette image, la propriété flex-direction est définie sur row, ce qui forme l'axe principal

Choisissez column ou column-reverse et votre axe principal parcourt du début au pied de la page dans la direction du bloc.

Trois éléments flexibles occupent toute la largeur du conteneur, affichés les uns sous les autres dans l'ordre du code. Flex-direction est défini sur column. L'axe principal est vertical, c'est-à-dire du haut vers le bas

Sur l'axe principal, vous pouvez contrôler le dimensionnement des éléments flexibles en ajoutant tout espace disponible aux éléments eux-mêmes, par le biais des propriétés flex sur les éléments. Ou, vous pouvez contrôler l'espace entre et autour des éléments en utilisant la propriété justify-content.

Voir aussi

Références de la propriété

En lire plus

Help improve MDN

Learn how to contribute

Cette page a été modifiée le par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content