flex-direction
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis â¨septembre 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
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div>Item One</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
display: flex;
}
#example-element > div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
width: 60px;
margin: 10px;
}
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
columnmais 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
<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
Voir aussi
- Guide CSS sur les boîtes flexibles : Concepts de base
- Guide CSS sur les boîtes flexibles : Ordonner les éléments flexibles