flex-direction

La propriété flex-direction définit la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments (normale ou inversée).

Exemple interactif

On notera que les valeurs row et row-reverse sont impactées par la direction du conteneur. Si dir vaut ltr, row représente l'axe horizontal allant de la gauche vers la droite et row-reverse représente le même axe allant de la droite vers la gauche. Si dir vaut rtl, row correspondra à l'axe horizontal orienté de la droite vers la gauche et row-reverse de la gauche vers la droite.

Pour plus d'informations, voir la page Utiliser les boîtes flexibles (flexbox) CSS.

Syntaxe

css

/* La direction suit une ligne */
flex-direction: row;

/* Semblable à <row> mais dans */
/* la direction opposée        */
flex-direction: row-reverse;

/* Les lignes de texte sont */
/* empilées                 */
flex-direction: column;

/* Semblable à <column> mais dans */
/* la direction opposée           */
flex-direction: column-reverse;

/* Valeurs globales */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;

Valeurs

row

L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la même direction que le contenu.

row-reverse

L'axe principal du conteneur flexible suit la direction du texte. Les points main-start et main-end vont dans la direction opposée au contenu.

column

L'axe principal du conteneur flexible suit l'axe de bloc (perpendiculaire à la direction du texte). Les points main-start et main-end correspondent aux points before et after de writing-mode.

column-reverse

Se comporte comme column mais main-start et main-end sont échangés.

Définition formelle

Valeur initialerow
Applicabilitéconteneurs flexibles
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

flex-direction = 
  row             |
  row-reverse     |
  column          |
  column-reverse

Exemples

HTML

html

<h4>Un exemple avec column-reverse</h4>
<div id="content">
    <div class="box" style="background-color:red;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>
<h4>Un exemple avec row-reverse</h4>
<div id="content1">
    <div class="box" style="background-color:red;">A</div>
    <div class="box" style="background-color:lightblue;">B</div>
    <div class="box" style="background-color:yellow;">C</div>
</div>

CSS

css

#content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: column-reverse;
}

#content1 {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction: row-reverse;
}

.box {
  width: 50px;
  height: 50px;
}

Résultat

Accessibilité

Lorsqu'on utilise flex-direction avec les valeurs row-reverse ou column-reverse, on crée une déconnexion entre la présentation visuelle du contenu et l'ordre du DOM. Cela aura un impact négatif pour les utilisateurs qui naviguent à l'aide d'outils d'assistance tels que les les lecteurs d'écran. Si l'ordre visuel est important, les utilisateurs de lecteurs d'écran n'auront pas accès à l'ordre correct pour la lecture.

Spécifications

Specification
CSS Flexible Box Layout Module Level 1
# flex-direction-property

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi