Propriété CSS flex-direction

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.