Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
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.
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 pageUtiliser les boîtes flexibles CSS pour plus d'informations à propos du standard actuel.
La propriétéCSSbox-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
horizontalLa boîte organise son contenu horizontalement.
verticalLa 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 (axeinline).
block-axis(HTML)La boîte organise son contenu (ses éléments enfants) dans le sens perpendiculaire à l'axe de lecteur (axeblock).
Les axes en ligne et de bloc dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, àhorizontal etvertical.
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é CSSdisplay vautbox ouinline-box.
Définition formelle
| Valeur initiale | inline-axis |
|---|---|
| Applicabilité | éléments avecdisplay qui vautbox ouinline-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 itemExemples
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> <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.