box-orient
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 a été remplacée dans une version plus récente de la spécification. Voir la page Utiliser les boîtes flexibles CSS (en-US) pour plus d'informations à propos du standard actuel.
La propriété CSS box-orient définit si un élément organise son contenu horizontalement ou verticalement.
/* Valeurs avec un mot-clé */
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;
/* Valeurs globales */
box-orient: inherit;
box-orient: initial;
box-orient: unset;
Syntaxe
Valeurs
horizontal-
La boîte organise son contenu horizontalement.
vertical-
La boîte organise son contenu verticalement.
inline-axis(HTML)-
La boîte organise son contenu (ses éléments enfants) dans le sens de l'axe de lecture (axe inline).
block-axis(HTML)-
La boîte organise son contenu (ses éléments enfants) dans le sens perpendiculaire à l'axe de lecteur (axe block).
Les axes en ligne et de bloc dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à horizontal et vertical.
Description
Les éléments HTML disposent par défaut leur contenu le long de l'axe en ligne. Cette propriété CSS s'appliquera uniquement aux éléments HTML pour lesquels la propriété CSS display vaut box ou inline-box.
Définition formelle
| Valeur initiale | inline-axis (horizontal en XUL) |
|---|---|
| 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
Exemples
Définir une orientation de boîte horizontale
Dans cet exemple, la propriété box-orient placera les deux sections <p> sur la même ligne.
HTML
<div class="exemple">
<p>Je serai à gauche de mon voisin.</p>
<p>Je serai à droite de mon voisin.</p>
</div>
CSS
div.exemple {
display: -moz-box; /* Mozilla */
display: -webkit-box; /* WebKit */
display: box; /* Comme spécifié */
/* Les enfants devraient s'orienter verticalement */
-moz-box-orient: horizontal; /* Mozilla */
-webkit-box-orient: horizontal; /* WebKit */
box-orient: horizontal; /* Comme spécifié */
}
Résultat
Spécifications
Cette propriété ne fait partie d'aucun standard.
Compatibilité des navigateurs
BCD tables only load in the browser