Propriété CSS flex-direction

La propriété flex-direction définit l'axe principal d'un conteneur flex, c'est-à-dire la direction selon laquelle ses éléments flex sont disposés. En faisant basculer l'axe principal entre horizontal et vertical (et en l'inversant éventuellement), une seule propriété contrôle si les éléments s'organisent en ligne ou en colonne. Il s'agit de l'une des propriétés CSS3 et elle fait partie du module Flexible Box Layout.

La propriété n'a aucun effet seule — l'élément doit d'abord être un conteneur flex, ce que vous créez avec display: flex (ou inline-flex). Une fois cela défini, chaque enfant direct devient un élément flex qui suit la direction choisie.

Les éléments flex peuvent être affichés :

horizontalement de gauche à droite (flex-direction: row) ou de droite à gauche (flex-direction: row-reverse)
verticalement de haut en bas (flex-direction: column) ou de bas en haut (flex-direction: column-reverse)

Axe principal et axe transversal

Flexbox fonctionne toujours avec deux axes. L'axe principal est celui que flex-direction choisit ; les éléments y sont placés l'un après l'autre. L'axe transversal lui est perpendiculaire. Cela est important car les propriétés d'alignement dépendent de la direction de chaque axe :

justify-content aligne les éléments le long de l'axe principal.
align-items aligne les éléments le long de l'axe transversal.

Ainsi, lorsque vous définissez flex-direction: column, l'axe principal devient vertical — et justify-content contrôle désormais le positionnement vertical tandis qu'align-items contrôle le positionnement horizontal. Utiliser la mauvaise propriété est l'erreur Flexbox la plus courante, et elle se ramène presque toujours à la valeur de flex-direction en vigueur.

Les valeurs *-reverse inversent l'ordre dans lequel les éléments sont affichés, mais elles ne modifient pas l'ordre des sources de votre HTML — ce qui est important pour l'accessibilité, car les lecteurs d'écran et la navigation au clavier suivent toujours l'ordre du DOM, et non l'ordre visuel.

Info

S'il n'y a pas d'éléments flex (le conteneur n'a pas d'enfants directs), la propriété flex-direction n'a aucun effet visible.

Valeur initiale	row
S'applique à	Conteneurs flex.
Hérité	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.flexDirection = "row-reverse";

Syntaxe

Syntaxe de la propriété CSS flex-direction

flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

Exemple de la propriété flex-direction :

Exemple de la propriété CSS flex-direction avec la valeur column-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Dans l'exemple suivant, les éléments sont affichés horizontalement en ligne de droite à gauche.

Exemple de la propriété flex-direction avec la valeur « row-reverse » :

Exemple de la propriété CSS flex-direction avec la valeur row-reverse

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

L'image suivante montre les éléments affichés dans l'ordre inverse de droite à gauche.

Exemple de la propriété flex-direction avec la valeur « row » :

Exemple de la propriété flex-direction avec la valeur « row »

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété flex-direction avec la valeur « column » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Exemple de la propriété flex-direction avec la valeur « column-reverse » :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction property example</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

Essayez vous-même »

Quand utiliser chaque valeur

row (par défaut) — barres de navigation horizontales, groupes de boutons et toute « liste d'éléments de gauche à droite ». Vous la spécifiez rarement explicitement puisqu'il s'agit déjà de la valeur par défaut.
column — empiler des cartes, des champs de formulaire ou des éléments de barre latérale verticalement tout en conservant l'alignement Flexbox et le contrôle de gap. Un schéma courant est une mise en page pleine hauteur : display: flex; flex-direction: column; min-height: 100vh avec un en-tête, une zone principale avec flex: 1, et un pied de page.
row-reverse / column-reverse — inverser l'ordre visuel sans toucher au HTML, par exemple pour refléter une mise en page pour les langues de droite à gauche ou afficher le dernier message de chat en bas tout en conservant le DOM dans l'ordre chronologique.

Un raccourci associé, flex-flow, définit flex-direction et flex-wrap en une seule déclaration — pratique quand vous avez également besoin que les éléments se répartissent sur plusieurs lignes.

Compatibilité des navigateurs

flex-direction est pris en charge dans tous les navigateurs modernes sans préfixe vendeur. Elle fait partie du modèle Flexbox plus général couvert dans le Guide ultime de Flexbox.

Valeurs

Valeur	Description	Tester
row	Les éléments sont affichés horizontalement en ligne. Il s'agit de la valeur par défaut de cette propriété.	Tester »
row-reverse	Les éléments sont affichés en ligne dans l'ordre inverse (de droite à gauche).	Tester »
column	Les éléments sont affichés verticalement de haut en bas.	Tester »
column-reverse	Les éléments sont affichés verticalement de bas en haut.	Tester »
initial	La propriété utilise sa valeur par défaut.	Tester »
inherit	La propriété hérite de la valeur de son élément parent.	Tester »

Pratique

Lesquelles des valeurs suivantes sont valides pour la propriété CSS flex-direction ?