Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version. La propriété -moz-box-direction ne peut être utilisée que dans des composants XUL tandis que la propriété box-direction a été remplacée par la propriété standard flex-direction. Voir la page Flexbox pour plus d'informations sur ce qui doit être utilisé à la place.
La propriété box-direction définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite). Pour plus de détails sur les propriétés des éléments flexibles, voir la page Flexbox.
/* Valeurs avec un mot-clé */ box-direction: normal; box-direction: reverse; /* Valeurs globales */ box-direction: inherit; box-direction: initial; box-direction: unset;
| Valeur initiale | normal |
|---|---|
| Applicabilité | éléments avec display qui vaut box ou inline-box |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
Valeurs
normal- La boîte répartit son contenu à partir du début (le côté gauche si la boîte est orientée horizontalement ou le côté haut si la boîte est orientée verticalement).
reverse- La boîte répartit son contenu à partir de la fin (le côté droit si la boîte est orientée horizontalement ou le côté bas si la boîte est orienté verticalement).
Syntaxe formelle
normal | reverse | inherit
Exemples
.exemple {
/* du bas vers le haut */
-moz-box-direction: reverse; /* Mozilla */
-webkit-box-direction: reverse; /* WebKit */
box-direction: reverse;
}
Notes
Si la direction de l'élément est définie grâce à l'attribut dir, la déclaration est ignorée.
Spécifications
- Brouillon de travail pour le module des boîtes flexibles (W3C) Note : L'état de cette spécification ne reflète pas l'implémentation de Mozilla ou Webkit.
- Ancienne version de la spécification Note : Les implémentations de WebKit et Mozilla se basent sur cette version de la spécification
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | Oui -webkit- | 12 -webkit- | Oui -moz- 49 -webkit- | Non | Oui -webkit- | 3 -webkit- 1.1 -khtml- |
| Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Support simple | ? | ? | Oui -webkit- | Oui -moz- 49 -webkit- | ? | 1 -webkit- | ? |
1. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.