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
/* 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
Exemples
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
#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
- Guide CSS sur les boîtes flexibles : Concepts de base
- Guide CSS sur les boîtes flexibles : Ordonner les éléments flexibles