Propriété flex-direction

La propriété flex-direction définit la direction de l'axe principal et transversal ou, en d'autres termes, dispose les éléments en ligne ou en colonne.

S'applique à l'élément parent pour les conteneurs flex. Fait partie de la propriété raccourcie flex-flow.

Syntaxe

csssélecteur {
  flex-direction: row | row-reverse | column | column-reverse;
}

Valeurs

Valeur par défaut : row.

Exemple

Les éléments sont disposés en ligne, par défaut alignés sur le bord gauche, leur numérotation suit l'ordre normal - de gauche à droite :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Exemple . Valeur row-reverse

Les éléments sont disposés en ligne, par défaut alignés sur le bord droit, leur numérotation suit l'ordre inverse - de droite à gauche :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: row-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Exemple . Valeur column

Les éléments sont disposés en colonne, par défaut alignés sur le haut, leur numérotation suit l'ordre normal - de haut en bas :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Exemple . Valeur column-reverse

Les éléments sont disposés en colonne, par défaut alignés sur le bas, leur numérotation suit l'ordre inverse - de bas en haut :

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

css#parent {
  flex-direction: column-reverse;
  display: flex;
}
#parent > div {
  border: 1px solid #696989;
  width: 100px;
  height: 50px;
}

Результат:

Voir aussi