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é CSS flex-direction définit la façon dont les éléments flexibles sont placés dans le conteneur flexible, en définissant l'axe principal et la direction (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>Élément Un</div>
<div>Élément Deux</div>
<div>Élément Trois</div>
</div>
</section>
#example-element {
border: 1px solid #c5c5c5;
width: 80%;
display: flex;
}
#example-element > div {
background-color: rgb(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.
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: revert;
flex-direction: revert-layer;
flex-direction: unset;
Valeurs
Les valeurs suivantes sont acceptées :
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.
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.
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
Inverser les colonnes et les lignes du conteneur flexible
HTML
<h4>Un exemple avec column-reverse</h4>
<div id="col-rev" class="content">
<div class="box red">A</div>
<div class="box lightblue">B</div>
<div class="box yellow">C</div>
</div>
<h4>Un exemple avec row-reverse</h4>
<div id="row-rev" class="content">
<div class="box red">A</div>
<div class="box lightblue">B</div>
<div class="box yellow">C</div>
</div>
CSS
.content {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: flex;
}
.box {
width: 50px;
height: 50px;
}
#col-rev {
flex-direction: column-reverse;
}
#row-rev {
flex-direction: row-reverse;
}
.red {
background-color: red;
}
.lightblue {
background-color: lightblue;
}
.yellow {
background-color: yellow;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Flexible Box Layout Module Level 1 # flex-direction-property |
Compatibilité des navigateurs
Voir aussi
- La propriété abrégée CSS
flex-flowpour les propriétés CSSflex-directionetflex-wrap. - Les concepts de base des boîtes flexibles
- Ordonner les éléments flexibles