Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété flex-direction

Description de la propriété flex-direction.

flex-direction définit l'axe principal d'un container flex-box. Les éléments qu'il contient doivent-ils s'aligner les uns à coté des autres (en ligne, c'est le cas classique) ou les uns en dessous des autres (en colonne) ?

Flex-direction en ligne
En ligne
Flex-direction en colonne
En colonne

flex-direction influence la plupart des autres propriétés relatives aux flex-box. Par exemple, flex-basis définit la largeur de base des éléments lorsqu'ils sont côte à côte, mais définit leur hauteur lorsqu'ils sont en colonne.

Syntaxes pour flex-direction.

    Remarque : le sens d'écriture, défini par writing-mode, influence également le positionnement des éléments dans un flex-box. Les explications ci-dessous sont données pour les langues européennes. En cas d'écriture en CJK ou en arabe, le comportement de flex-direction peut être modifié.

  • flex-direction: row;
    1
    2
    3

    Valeur par défaut. L'axe principal est défini comme étant horizontal : les éléments internes du flex-box se positionnent les uns à côté des autres, en ligne.

    Pour être plus précis, et prendre en compte les langues non européennes, il faudrait dire que l'axe principal est fixé identique à celui d'écriture (de gauche à droite pour les langues européennes).

  • flex-direction: row-reverse;
    1
    2
    3

    Les éléments internes du flex-box se positionnent les uns à côté des autres, mais en commençant par la fin du container flex.

  • flex-direction: column;
    1
    2
    3

    Les éléments internes du flex-box se positionnent les uns en dessous des autres : en colonne.

  • flex-direction: column-reverse;
    1
    2
    3

    Les éléments internes du flex-box se positionnent en colonne, les uns en dessous des autres, mais en commençant par la fin du container.

  • flex-direction: initial; flex-direction: unset; flex-direction: inherit;

    La valeur initiale est row.
    Reportez-vous à la description générale de ces valeurs.

Simulateur.

flex-direction :
1
2
3

Voir aussi...

Flex-box - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • display : Type de l'élément et la façon de l'afficher.
  • flex : Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • flex-flow : Echaînement des éléments enfant dans un flex-box.
  • flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
  • flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
  • flex-wrap : Gestion des retours à la ligne dans un container flex.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • order : Ordre des éléments dans un flex-box.