Flex-direction - Propriété CSS

flex-direction

Résumé des caractéristiques de la propriété `flex-direction`

Description rapide

Choisit l'axe principal et l'axe secondaire d'un flex box.

Statut

Standard

Utilisable sur

HTML

Valeurs prédéfinies

row | row-reverse | column | column-reverse

Pourcentages

Ne s'appliquent pas.

Valeur initiale

row

Héritée par défaut

Non.

Type d'animation

Discrète : lors d'une animation, la propriété flex-direction passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Mise en page par flex-box

Références (W3C)

CSS Flexible Box Layout Module Level 1

Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de `flex-direction`.

Schéma syntaxique de la propriété flex-direction
Les liens du schéma donnent accès à plus de détails
Télécharger le schéma en SVG

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;

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.

Valeurs communes à toutes les propriétés :


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.

flex-direction :

row

row-reverse

column

column-reverse

Compatibilité des navigateurs avec `flex-direction`.

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

Colonne 1

Prise en charge des conteneurs flex-box de façon générale.

Colonne 2

Support de la propriété flex-direction qui définit l'axe principal et l'axe secondaire d'un conteneur flex-box.

Remarques :

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

Support des
Flex-box

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

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

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 :

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

Enchaî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-box.

order

Définit l'ordre des éléments dans un flex-box.