W3Docs

Apparence

Français

Propriété CSS flex-direction ​

La propriété flex-direction spécifie l'axe principal d'un flex conteneur et définit l'ordre des éléments flex. Il s'agit de l'une des propriétés CSS3. Cette propriété fait partie du module Flexible Box Layout.

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)

INFO

S'il n'y a pas d'éléments flexibles, la propriété flex-direction n'a aucun effet.

Valeur initialerow
S'applique àConteneurs flex.
HéritéeNon.
AnimableNon.
VersionCSS3
Syntaxe DOMobject.style.flexDirection = "row-reverse";

Syntaxe ​

Syntaxe de la propriété CSS flex-direction

css
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

html
<!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>
Try it Yourself »

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

html
<!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>
Try it Yourself »

Résultat ​

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

Propriété CSS flex-direction

Exemple de la propriété flex-direction avec la valeur "row" : ​

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

html
<!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>
Try it Yourself »

Exemple de la propriété flex-direction avec la valeur "column" : ​

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

html
<!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>
Try it Yourself »

Exemple de la propriété flex-direction avec la valeur "column-reverse" : ​

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

html
<!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>
Try it Yourself »

Valeurs ​

ValeurDescriptionEssayer
rowLes éléments sont affichés horizontalement en ligne. Il s'agit de la valeur par défaut de cette propriété.Essayer »
row-reverseLes éléments sont affichés en ligne dans l'ordre inverse (de droite à gauche).Essayer »
columnLes éléments sont affichés verticalement de haut en bas.Essayer »
column-reverseLes éléments sont affichés verticalement de bas en haut.Essayer »
initialLa propriété utilise sa valeur par défaut.Essayer »
inheritLa propriété hérite de la valeur de son élément parent.Essayer »

Pratique ​

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

Trouvez-vous cela utile?

Aperçu dual-run — comparez avec les routes Symfony en production.