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