Propriété CSS box-orient
Obsolète
Évitez d'utiliser cette fonctionnalité dans de nouveaux projets. Cette fonctionnalité peut être candidate à la suppression des standards web ou des navigateurs.
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 de la spécification. Voir la page Utiliser les boîtes flexibles CSS 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.
Syntaxe
/* 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;
Valeurs
Cette propriété est définie par l'un des mots-clés suivants :
horizontal-
La boîte organise son contenu horizontalement.
vertical-
La boîte organise son contenu verticalement.
inline-axis(HTML)-
La boîte affiche ses enfants le long de l'axe en ligne.
block-axis(HTML)-
La boîte affiche ses enfants le long de l'axe de bloc.
Les axes en ligne et de bloc dépendent du mode d'écriture pour l'anglais, ils correspondent, 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'applique uniquement aux éléments HTML pour lesquels la propriété CSS display vaut box ou inline-box.
Définition formelle
| Valeur initiale | inline-axis |
|---|---|
| Applicabilité | éléments avec display qui vaut box ou inline-box |
| Héritée | non |
| Valeur calculée | comme défini |
| Type d'animation | discrète |
Syntaxe formelle
box-orient =
horizontal |
vertical |
inline-axis |
block-axis
Exemples
Définir une orientation de boîte horizontale
Dans cet exemple, la propriété box-orient place les deux paragraphes <p> sur la même ligne.
HTML
<div class="exemple">
<p>Je suis à gauche de mon voisin.</p>
<p>Je suis à droite de mon voisin.</p>
</div>
CSS
div.exemple {
display: -moz-box; /* Mozilla */
display: -webkit-box; /* WebKit */
display: box; /* Comme défini */
/* Les enfants doivent s'orienter verticalement */
-moz-box-orient: horizontal; /* Mozilla */
-webkit-box-orient: horizontal; /* WebKit */
box-orient: horizontal; /* Comme défini */
}
Résultat
Spécifications
Cette propriété ne fait partie d'aucun standard.
Compatibilité des navigateurs
Voir aussi
- La propriété
box-direction - La propriété
box-pack - La propriété
box-align - La propriété
flex-direction