Propriété CSS flex-direction

La propriété flex-direction définit l'axe principale d'un conteneur flex et installe l'ordre dans lequel les éléments flexibles apparaissent.

La propriété flex-direction est une partie du module Flexible Box Layout.

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

  • horizontalement le long de la rangée de la gauche vers la droite (flex-direction:row) ou de la droite vers la gauche (flex-direction:row-reverse)
  • verticalement de haut en bas (flex-direction:column) ou de bas en haut (flex-direction)

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

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

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété flex-direction</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eee;">C</div>
      <div style="background-color: #666;">F</div>
    </div>
  </body>
</html>

Dans l'exemple suivant on a utilisée la valeur "row-reverse" où les éléments sont affichés horizontalement comme une rangée de la droite vers la gauche.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété flex-direction</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eee;">C</div>
      <div style="background-color: #666;">F</div>
    </div>
  </body>
</html>

Valeurs

Valeur Description
row Les éléments sont affichés horizontalement comme une rangée. C'est la valeur initiale de cette propriété.
row-reverse Les éléments sont affichés horizontalement dans une rangée dans un ordre contraire (de la droite vers la gauche).
column Les éléments sont affichés verticalement de haut en bas.
column-reverse Les éléments sont affichés verticalement de bas en haut.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

29.0+
21-28 -webkit-
28.0+ 9.0+
6.1-8.0 -webkit-
12.1+


Trouvez-vous cela utile?

Articles Associées