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 プロパティは以下に挙げたキーワード値のうちの一つで指定します。

値

normal: ボックスが内容を先頭 (左または上の端) から配置します。
reverse: ボックスが内容を末尾 (右または下の端) から配置します。

メモ

整列のために start と指定されたボックスの辺は、ボックスの方向によって異なります。

水平方向の要素の場合、 start は上端になります。
垂直方向の要素の場合、 start は左端になります。

start の反対側の端は end となります。

要素の dir 属性を使用して書字方向を設定した場合は、このスタイルは無視されます。

公式定義

初期値	`normal`
適用対象	CSS の `display` の値が `box` または `inline-box` である要素
継承	なし
計算値	指定通り
アニメーションの種類	離散値

.example {
 /* bottom-to-top layout */
 -moz-box-direction: reverse; /* Mozilla */
 -webkit-box-direction: reverse; /* WebKit */
 box-direction: reverse; /* 仕様書通り */
}