Flex-direction - Propriété CSS

Schéma de la syntaxe de 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) ?

En ligne

En colonne

En changeant l'orientation du flex-box flex-direction définit son axe principal et son axe secondaire. En conséquence flex-direction interagit avec 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.

Valeurs 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;

  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).

  1

  2

  3
• flex-direction: row-reverse;

  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.
  

  1

  2

  3
• flex-direction: column;

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

  1

  2

  3
• flex-direction: column-reverse;

  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.

  1

  2

  3
• flex-direction: initial; (row) flex-direction: inherit; flex-direction: revert; flex-direction: revertLayer; flex-direction: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de flex-direction.

L'animation de la propriété flex-direction est possible mais la nature même de cette propriété ne s'y prête pas vraiment : basculer la direction du flex-box de ligne à colonne suppose un re-calcul de la mise en page complète. Sur l'exemple ci-dessous, l'animation se fait entre les valeurs row et row-reverse.

Exemple interactif avec la propriété flex-direction.

Remarque. La hauteur du container flex a été limitée à 500 pixels. Faute de quoi, lorsque les éléments se positionnent en colonne, ils étirent le container et on obtient toujours une seule colonne.

Compatibilité des navigateurs avec flex-direction.

Tous les navigateurs récents prennent correctement en charge la propriété flex-direction.

Remarques :

(1) Implémentation partielle. De nombreux bogues présents.

1

Support des
Flex-box

2

Propriété
flex-direction

Estimation de la prise en charge globale.

97%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Safari

Safari sur IOS

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété flex-direction.

• Module CSS - Mise en page par flex-box - Niveau 1

  Première introduction de la propriété flex-direction.
  

  23 Juillet 2009

  Document de travail.

  

  18 Septembre 2012

  Candidat à la recommandation.

  

  

Voir aussi, à propos des flex-box.

Les spécificités des flex-box sont dans le module CSS Flexible Box Layout Module. La propriété flex-direction y figure, ainsi que toutes celles qui sont listée ci-dessous.

Propriétés :