flex-direction - Propriété CSS
Résumé des caractéristiques de la propriété flex-direction
row
| row-reverse
| column
| column-reverse
row
flex-direction
passe d'une valeur à l'autre sans transition.Description de la propriété flex-direction
.
flex-direction
définit l'axe principal d'un container flex-box.
Les éléments qu'il contient doivent-ils s'aligner les uns à coté des autres (en ligne, c'est le cas classique)
ou les uns en dessous des autres (en colonne) ?
En ligne
En colonne
En changeant l'orientation du flex-box flex-direction
définit son axe principal et son axe secondaire.
En conséquence flex-direction
interagit avec la plupart des autres propriétés relatives aux flex-box.
Par exemple, flex-basis
définit la largeur de base des éléments lorsqu'ils sont côte à côte,
mais définit leur hauteur lorsqu'ils sont en colonne.
Syntaxes pour flex-direction
.
Remarque : le sens d'écriture, défini par writing-mode
, influence également le positionnement des éléments dans un flex-box.
Les explications ci-dessous sont données pour les langues européennes.
En cas d'écriture en CJK ou en arabe, le comportement de flex-direction
peut être modifié.
- flex-direction: row;123
Valeur par défaut. L'axe principal est défini comme étant horizontal : les éléments internes du flex-box se positionnent les uns à côté des autres, en ligne.
Pour être plus précis, et prendre en compte les langues non européennes, il faudrait dire que l'axe principal est fixé identique à celui d'écriture (de gauche à droite pour les langues européennes).
- flex-direction: row-reverse;123
Les éléments internes du flex-box se positionnent les uns à côté des autres, mais en commençant par la fin du container flex.
- flex-direction: column;123
Les éléments internes du flex-box se positionnent les uns en dessous des autres : en colonne.
- flex-direction: column-reverse;123
Les éléments internes du flex-box se positionnent en colonne, les uns en dessous des autres, mais en commençant par la fin du container.
- flex-direction:
initial
; flex-direction:inherit
; flex-direction:revert
; flex-direction:revert-layer
; flex-direction:unset
;La valeur initiale est :
.row
Animation de flex-direction
.
L'animation de la propriété flex-direction
est possible mais la nature même de cette propriété ne s'y prête
pas vraiment : basculer la direction du flex-box de ligne à colonne suppose un re-calcul de la mise en page complète.
Sur l'exemple ci-dessous, l'animation se fait entre les valeurs row
et row-reverse
.
Simulateur.
Remarque. La hauteur du container flex a été limitée à 500 pixels. Faute de quoi, lorsque les éléments se positionnent en colonne, ils étirent le container et on obtient toujours une seule colonne.
Prise en charge par les navigateurs (compatibilité).
Tous les navigateurs récents prennent correctement en charge la propriété flex-direction
.
flex-direction
flex-direction
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que flex-direction
.
Les spécifications CSS éditées par le W3C sont organisées en modules. flex-direction
fait partie du Module CSS - Mise en page par flex-box (CSS Flexible Box Layout Module). Les définitions suivantes sont également décrites dans ce même module.