Une fois Flexbox activé sur un conteneur, ses enfants s'alignent par défaut en ligne, de gauche à droite. Ce comportement n'a rien d'obligatoire : flex-direction décide entièrement du sens dans lequel les éléments se suivent, et ce choix a des conséquences sur toutes les autres propriétés d'alignement du conteneur.
On la rencontre dès qu'une mise en page doit basculer d'un agencement horizontal à un agencement vertical, par exemple une barre d'outils qui devient une colonne de boutons sur mobile, ou un panneau latéral qui empile ses éléments au lieu de les aligner côte à côte.
Définition
flex-direction est la propriété qui définit l'orientation de l'axe principal d'un conteneur flex, c'est-à-dire le sens dans lequel ses enfants directs se répartissent. Elle accepte quatre valeurs, chacune orientant l'axe principal différemment.
.conteneur {
display: flex;
flex-direction: row;
}row est la valeur par défaut : les éléments s'alignent horizontalement, dans l'ordre où ils apparaissent dans le HTML, de gauche à droite dans une page en français ou en anglais.
Les quatre valeurs
| Valeur | Sens de l'axe principal | Ordre visuel |
|---|---|---|
row | Horizontal | Identique à l'ordre du HTML |
row-reverse | Horizontal, inversé | Dernier élément du HTML en premier |
column | Vertical | Identique à l'ordre du HTML |
column-reverse | Vertical, inversé | Dernier élément du HTML en premier |
Passer de row à column ne se limite pas à empiler les éléments les uns sous les autres : cela fait pivoter tout l'axe principal de quatre-vingt-dix degrés, et l'axe secondaire avec lui.
Ce que la rotation change vraiment
C'est le point le plus facile à sous-estimer : justify-content et align-items continuent de s'écrire exactement de la même façon, mais leur direction visuelle change avec flex-direction. En row, justify-content agit horizontalement. En column, cette même propriété agit verticalement, sans qu'une seule ligne de code ne change dans la déclaration.
.colonne {
display: flex;
flex-direction: column;
justify-content: center;
}Dans cet exemple, justify-content: center centre les éléments verticalement, et non horizontalement, précisément parce que flex-direction a fait pivoter l'axe principal vers la verticale.
Un cas d'usage fréquent : le responsive
flex-direction est l'une des propriétés les plus souvent modifiées dans une media query, pour transformer une disposition horizontale en disposition verticale sur petit écran.
.barre {
display: flex;
flex-direction: row;
}
@media (max-width: 600px) {
.barre {
flex-direction: column;
}
}Sur un écran étroit, les mêmes éléments HTML, dans le même ordre, s'empilent verticalement au lieu de se serrer sur une ligne. Aucun élément n'a besoin d'être déplacé ou dupliqué dans le balisage : seule la direction de l'axe change.
Le piège des valeurs reverse
row-reverse et column-reverse inversent l'ordre visuel des éléments, mais uniquement à l'écran : le HTML, lui, garde son ordre d'origine.
row-reverse ou column-reverse ne modifie pas l'ordre de lecture au clavier ni pour les lecteurs d'écran. Un utilisateur qui navigue avec Tab passe toujours les éléments dans l'ordre du HTML, ce qui peut sembler incohérent avec ce qu'il voit à l'écran si le contenu a un sens de lecture logique.Questions fréquentes
flex-direction: column-reverse est-il utile pour un fil de discussion ?Oui, c'est un de ses usages les plus courants : afficher les messages les plus récents en bas sans avoir à réordonner les données côté serveur. Le HTML garde l'ordre chronologique naturel, et column-reverse se charge d'afficher visuellement le dernier message en dernière position, comme dans une messagerie classique.
flex-direction ?Techniquement oui avec une transition, mais le résultat est rarement satisfaisant : le passage de row à column ne se prête pas à une interpolation fluide, les éléments sautent souvent de position au lieu de glisser. Il est plus courant de gérer ce changement directement via une media query, sans transition, ou de recourir à une animation plus fine avec des transformations.
flex-direction fonctionne-t-il sans flex-wrap ?Oui, ce sont deux propriétés indépendantes. flex-direction choisit uniquement le sens de l'axe principal, alors que flex-wrap décide si les éléments peuvent se répartir sur plusieurs lignes ou colonnes. Un conteneur peut très bien avoir flex-direction: column sans jamais avoir besoin de passer à la ligne, si son contenu tient dans la hauteur disponible.