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 2020.

* Learn more
* See full compatibility
* Report feedback
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 initiale | `row` |
| Applicabilité | conteneurs flexibles |
| Héritée | non |
| Valeur calculée | comme spécifié |
| Type d'animation | discrè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.

* Les boîtes flexibles et la déconnexion par rapport à la navigation au clavier, Tink (en anglais)
* L'importance de l'ordre de la source, Adrian Roselli (en anglais)
* Comprendre les règles 1.3 du WCAG
* Comprendre les critères de réussite 1.3.2 WCAG 2.0, W3C (en anglais)
Spécifications
--------------

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

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Guide CSS sur les boîtes flexibles : *Concepts de base*
* Guide CSS sur les boîtes flexibles : *Ordonner les éléments flexibles*