box-direction

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;

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

Valeur initialenormal
Applicabilitééléments avec display qui vaut box ou inline-box
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi