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 initialeinline-axis (horizontal en XUL)
Applicabilitééléments avec display qui vaut box ou inline-box
Héritéenon
Valeur calculéecomme spécifié
Type d'animationdiscrète

Syntaxe formelle

Error: could not find syntax for this item

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

Voir aussi