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 :

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
Type de valeur
Valeur prédéfinie
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)
Statut du document:: CR (document proposé pour la recommandation)

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

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.

Syntaxes pour flex-direction.

Syntaxe de flex-directionSchéma syntaxique de la propriété CSS flex-direction (choix de l'axe principal et l'axe secondaire d'un conteneur flex). row row row-reverse row-reverse column column column-reverse column-reverseflex-direction:;flex-direction:;Télécharger l'image en SVG

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: inherit; flex-direction: revert; flex-direction: revert-layer; flex-direction: unset;

    La valeur initiale est : row.

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.

A
B
C

Simulateur.

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 :
1
2
3
4
5
6

Prise en charge par les navigateurs (compatibilité).

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

Colonne 1
Prise en charge générale des mises en page avec des conteneurs flex-box.
Colonne 2
Support de la propriété flex-direction
1
Flex˗box
2
flex-direction
Estimation de la prise en charge en pourcentage du parc actuel.
98%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que flex-direction.

Les spécifications CSS éditées par le W3C sont organisées en modules. flex-direction fait partie du Module CSS - Mise en page par flex-box (CSS Flexible Box Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Propriété raccourcie pour définir les principales caractéristiques d'un flex-box et des éléments internes.
Détermine la dimension par défaut d'un élément contenu dans un flex-box.
Echaînement des éléments enfant dans un flex-box.
Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
Autorise ou non la compression d'un élément contenu dans un flex-box.
Gestion des retours à la ligne dans un container flex.
Ordre des éléments dans un flex-box.