box-orient
非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
これはもともと 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 の <xul:box>
や <xul:hbox>
要素は既定で中身を水平にレイアウトするのに対し、XUL の <xul:vbox>
要素は既定で中身を垂直にレイアウトします。
HTML DOM 要素は既定で中身をインライン軸に沿ってレイアウトします。この CSS プロパティは HTML 要素のうち CSS の display
が box
または inline-box
の値であるものに対してのみ適用されます。
初期値 | inline-axis (XUL における horizontal ) |
---|---|
適用対象 | CSS の display の値が box または inline-box である要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
構文
box-orient
プロパティは以下の列挙されたキーワード値のうちの一つで指定します。
値
horizontal
- ボックスは、その内容を水平にレイアウトします。
vertical
- ボックスは、その内容を垂直にレイアウトします。
inline-axis
(HTML)- ボックスは、子をインライン軸に沿って表示します。
block-axis
(HTML)- ボックスは、子をブロック軸に沿って表示します。
inline-axis
と block-axis
は書字方向に依存するキーワードであり、英語では、それぞれ horizontal
と vertical
に対応付けられます。
形式文法
例
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
プロパティは、例にある上記の二つの <p>
セクションに作用して同じ行に表示するようにし、次のように表示します。
メモ
XUL 要素では、方向は要素の orient
属性を使用して設定されるので、このスタイルは無視されます。
仕様書
- Flexible Box Layout Module (W3C Working Draft)
注:
この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。 - Old Flexible Box Layout Module
注:
Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。
ブラウザーの対応
BCD tables only load in the browser