box-orient
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.
Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.
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
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 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 |
|---|---|
| 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
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 placera les deux paragraphes <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 défini */
/* Les enfants devraient 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