--- title: box-orient slug: Web/CSS/box-orient tags: - CSS - Non-standard - Reference translation_of: Web/CSS/box-orient ---
{{CSSRef}}{{Non-standard_header}}

これはもともと CSS Flexible Box Layout Module の草稿でしたが、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

CSS の box-orient プロパティは、要素がその中身をレイアウトする方向が、水平か垂直かを指定します。

/* キーワード値 */
box-orient: horizontal;
box-orient: vertical;
box-orient: inline-axis;
box-orient: block-axis;

/* グローバル値 */
box-orient: inherit;
box-orient: initial;
box-orient: unset;

例えば、 XUL の {{XULElem("box")}} や {{XULElem("hbox")}} 要素は既定で中身を水平にレイアウトするのに対し、XUL の {{XULElem("vbox")}} 要素は既定で中身を垂直にレイアウトします。

HTML DOM 要素は既定で中身をインライン軸に沿ってレイアウトします。この CSS プロパティは HTML 要素のうち CSS の {{CSSxRef("display")}} が {{CSSxRef("box")}} または {{CSSxRef("inline-box")}} の値であるものに対してのみ適用されます。

{{CSSInfo}}

構文

box-orient プロパティは以下の列挙されたキーワード値のうちの一つで指定します。

値

horizontal
ボックスは、その内容を水平にレイアウトします。
vertical
ボックスは、その内容を垂直にレイアウトします。
inline-axis (HTML)
ボックスは、子をインライン軸に沿って表示します。
block-axis (HTML)
ボックスは、子をブロック軸に沿って表示します。

inline-axis と block-axis は書字方向に依存するキーワードであり、英語では、それぞれ horizontal と vertical に対応付けられます。

形式文法

{{CSSSyntax}}

例

CSS

div.example {
  display: -moz-box;                /* Mozilla */
  display: -webkit-box;             /* WebKit */
  display: box;                     /* 仕様書通り */

  /* 子は垂直に向けられる */
  -moz-box-orient: horizontal;      /* Mozilla */
  -webkit-box-orient: horizontal;   /* WebKit */
  box-orient: horizontal;           /* 仕様書通り */
}

HTML

<div class="example">
  <p>I will be to the left of my sibling.</p>
  <p>I will be to the right of my sibling.</p>
</div>

結果

box-orient プロパティは、例にある上記の二つの {{HTMLElement("p")}} セクションに作用して同じ行に表示するようにし、次のように表示します。

{{ EmbedLiveSample('Examples', 600, 50, '', 'Web/CSS/box-orient') }}

メモ

XUL 要素では、方向は要素の {{XULAttr("orient")}} 属性を使用して設定されるので、このスタイルは無視されます。

仕様書

ブラウザーの対応

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

関連情報