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
ボックスが内容を末尾 (右または下の端) から配置します。

形式文法

normal | reverse | inherit

例

.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 属性を使用して設定されている場合は、このスタイルは無視されます。

仕様書

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
box-direction
非推奨非標準
Chrome 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
接頭辞付き
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 15
接頭辞付き
完全対応 15
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari 完全対応 3
接頭辞付き
完全対応 3
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 1.1 — 3
接頭辞付き
接頭辞付き -khtml- のベンダー接頭辞が必要
WebView Android 完全対応 ≤37
接頭辞付き
完全対応 ≤37
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 18
接頭辞付き
完全対応 18
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 4
接頭辞付き
完全対応 4
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 14
接頭辞付き
完全対応 14
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Safari iOS 完全対応 1
接頭辞付き
完全対応 1
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android 完全対応 1.0
接頭辞付き
完全対応 1.0
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要

凡例

完全対応  
完全対応
未対応  
未対応
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非推奨。新しいウェブサイトでは使用しないでください。
非推奨。新しいウェブサイトでは使用しないでください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報