flex-direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
flex-direction
column
column-reverse
row
row-reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Voir aussi