flex-direction
Définit le sens de l’axe principal : les éléments flex s’alignent en ligne ou en colonne.
- Valeur initiale
row- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs flex
- JavaScript
element.style.flexDirection = "column"
Exemple
#.cards {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 600px) {
.cards { flex-direction: row; }
}<div class="cards stage">
<div class="box">HTML</div>
<div class="box">CSS</div>
<div class="box">JS</div>
</div>Définition et utilisation
#La propriété flex-direction choisit l’axe principal du conteneur flex. Avec row, les éléments se placent côte à côte horizontalement, avec column, les uns sous les autres. Les variantes en -reverse inversent l’ordre d’affichage.
Le sens choisi influence le fonctionnement des autres propriétés. justify-content répartit toujours les éléments le long de l’axe principal, et align-items le long de l’axe secondaire. Après un passage à column, justify agit donc verticalement, et align horizontalement.
Inverser l’ordre ne change que l’apparence. Les lecteurs d’écran et la navigation avec la touche Tab suivent toujours l’ordre du code, donc n’utilisez pas -reverse pour organiser un contenu important.
Syntaxe
#flex-direction: row | row-reverse | column | column-reverse;Valeurs
#- Éléments en ligne, dans le sens d’écriture du texte.
- Ligne en ordre inverse, à partir du bord droit.
- Éléments en colonne, de haut en bas.
- Colonne en ordre inverse, à partir du bas.
Valeurs en pratique
#row
.demo { flex-direction: row; }row-reverse
.demo { flex-direction: row-reverse; }column
.demo { flex-direction: column; }column-reverse
.demo { flex-direction: column-reverse; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Sur téléphone, on commence souvent par
column, puis on passe àrowsur les écrans plus larges via une requête@media. - Changer de sens échange les rôles de
justify-contentetalign-items. C’est la source de surprise la plus fréquente avec Flexbox.
Entrées associées
#- flex-wrapPermet aux éléments flex de passer à la ligne suivante quand la place manque.
- flex-flowRaccourci qui réunit flex-direction et flex-wrap en une seule déclaration.
- justify-contentRépartit les éléments le long de l’axe principal d’un conteneur flex ou grid.
- align-itemsAligne les éléments sur l’axe secondaire d’un conteneur flex ou grid.
- orderChange l’ordre d’affichage d’un élément dans un conteneur flex ou grid.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.