box-direction
非標準
この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
これはもともと CSS Flexible Box Layout Module の草稿のプロパティでしたが、より新しい標準に置き換えられました。以前の標準であった box-direction
は flex-direction
に置き換えられたので、 -moz-box-direction
は XUL でのみ使用されます。現在の標準についての情報はフレックスボックスを参照してください。
CSS の box-direction
プロパティは、ボックスが内容を通常通りに (上または左から) 配置するか、逆方向に (下または右から) 配置するかを指定します。
/* キーワード値 */
box-direction: normal;
box-direction: reverse;
/* グローバル値 */
box-direction: inherit;
box-direction: initial;
box-direction: unset;
初期値 | normal |
---|---|
適用対象 | CSS の display の値が box または inline-box である要素 |
継承 | なし |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
構文
box-direction
プロパティは以下の列挙されたキーワード値のうちの一つで指定します。
値
normal
- ボックスが内容を先頭 (左または上の端) から配置します。
reverse
- ボックスが内容を末尾 (右または下の端) から配置します。
形式文法
例
.example {
/* bottom-to-top layout */
-moz-box-direction: reverse; /* Mozilla */
-webkit-box-direction: reverse; /* WebKit */
box-direction: reverse; /* 仕様書通り */
}
メモ
配置目的で start で示されるボックスの端は、ボックスの方向に依存します。
Horizontal | left |
---|---|
Vertical | top |
start と反対側の辺は end で示します。
書字方向が要素の dir
属性を使用して設定されている場合は、このスタイルは無視されます。
仕様書
- Flexible Box Layout Module (W3C Working Draft)
注:
この仕様書の現在の状態は、 Mozilla や WebKit の古い実装を反映しているものではありません。 - Old Flexible Box Layout Module
注:
Mozilla および WebKit の実装は、こちらの版の仕様を反映していました。
ブラウザーの対応
BCD tables only load in the browser