box-direction

Non standard: Cette fonctionnalité n'est pas standardisée. Nous déconseillons d'utiliser des fonctionnalités non standard en production, car leur prise en charge par les navigateurs est limitée, et elles peuvent être modifiées ou supprimées. Toutefois, elles peuvent constituer une alternative appropriée dans certains cas où aucune option standard n'existe.

Attention : Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et a été remplacée dans une version plus récente. 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é CSS box-direction définit si une boîte doit organiser son contenu dans la direction normale (de haut en bas ou de gauche à droite).

css

/* Valeurs avec un mot-clé */
box-direction: normal;
box-direction: reverse;

/* Valeurs globales */
box-direction: inherit;
box-direction: initial;
box-direction: revert;
box-direction: revert-layer;
box-direction: unset;

Syntaxe

La propriété box-direction est paramétrée avec l'un des mots-clés suivants.

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ée verticalement).

Notes

Le bord de la boîte désigné par start pour l'alignement dépend de l'orientation de la boîte :

Pour les éléments horizontaux, start correspond au bord haut.
Pour les éléments verticaux, start correspond au bord gauche.

Le bord opposé au bord start est désigné par end.

Si la direction de l'élément est définie grâce à l'attribut dir, la déclaration est ignorée.

Définition formelle

Valeur initiale	`normal`
Applicabilité	éléments avec `display` qui vaut `box` ou `inline-box`
Héritée	non
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

Error: could not find syntax for this item

Exemples

css

.exemple {
  /* du bas vers le haut */
  -moz-box-direction: reverse; /* Mozilla */
  -webkit-box-direction: reverse; /* WebKit */
  box-direction: reverse;
}