From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/box-orient/index.html | 111 +++++++++++++++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/fr/web/css/box-orient/index.html (limited to 'files/fr/web/css/box-orient') diff --git a/files/fr/web/css/box-orient/index.html b/files/fr/web/css/box-orient/index.html new file mode 100644 index 0000000000..a00996d4bd --- /dev/null +++ b/files/fr/web/css/box-orient/index.html @@ -0,0 +1,111 @@ +--- +title: box-orient +slug: Web/CSS/box-orient +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +
+

Attention ! Cette propriété fait partie de la première version du standard pour les boîtes flexibles (flexbox) et sera remplacée dans une prochaine version.

+
+ +

La propriété CSS box-orient définit si un élément organise son contenu horizontalement ou verticalement.

+ +

Pour plus de détails, se référer à la page Flexbox qui décrit les différentes propriétés des boîtes flexibles.

+ +
/* 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;
+
+ +

Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que  {{XULElem("vbox")}} organise son contenu de façon verticale par défaut.

+ +

Les éléments HTML disposent leurs contenus selon l'axe inline par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}.

+ +

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-fils) dans le sens de l'axe de lecture (axe inline).
+
block-axis (HTML)
+
La boîte organise son contenu (ses éléments-fils) dans le sens perpendiculaire à l'axe de lecteur (axe block).
+
+ +

Les axes inline et block dépendent du mode d'écriture (pour l'anglais, ils correspondront, respectivement, à horizontal et vertical.

+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
div.exemple {
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+  display: box; /* On utilise les boîtes */
+
+  -moz-box-orient: horizontal; /* Mozilla */
+  -webkit-box-orient: horizontal; /* WebKit */
+  box-orient: horizontal; /* spécifié */
+}
+ +

HTML

+ +
<div class="exemple">
+  <p>Je serai à gauche de mon voisin.</p>
+  <p>Et moi à droite de mon voisin.</p>
+</div>
+ +

Résultat

+ +

On aura les deux paragraphes situés côte à côte.

+ +

{{EmbedLiveSample("Exemples")}}

+ +

Notes

+ +

Pour les éléments XUL, si l'orientation est définie avec l'attribut {{XULAttr("orient")}} cette propriété est ignorée.

+ +

Spécifications

+ + + +

{{cssinfo}}

+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.properties.box-orient")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf