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
| Ordinateur | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Webview Android | Chrome pour Android | Edge Mobile | Firefox pour Android | Opera pour Android | Safari pour iOS | Samsung Internet | |
| Support simple | Chrome
Support complet
Oui
| Edge
Support complet
12
| Firefox
Support complet
Oui
| IE Aucun support Non | Opera
Support complet
Oui
| Safari
Support complet
3
| WebView Android ? | Chrome Android ? | Edge Mobile
Support complet
Oui
| Firefox Android
Support complet
Oui
| Opera Android ? | Safari iOS
Support complet
1
| Samsung Internet Android ? |
Légende
- Support complet
- Support complet
- Aucun support
- Aucun support
- Compatibilité inconnue
- Compatibilité inconnue
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
- Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.