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 initialenormal
Applicabilitééléments avec display qui vaut box ou inline-box
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'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

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Support simple (Oui)-webkit (Oui)-moz[1] (Oui)-webkit Pas de support (Oui)-webkit 1.1-khtml
3.0-webkit
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) Edge IE Mobile Opera Mobile Safari Mobile
Support simple ? ? (Oui) -moz[1] (Oui)-webkit Pas de support ? 1.0-webkit

[1] En plus de la version préfixée, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) prend en charge la version préfixée par -webkit à des fins de compatibilité web grâce à la préférence layout.css.prefixes.webkit dont la valeur par défaut vaut false. Depuis Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), cette valeur par défaut est passée à true.

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, teoli, FredB, Kyodev, Fredchat
 Dernière mise à jour par : SphinxKnight,