box-ordinal-group

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

警告: これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報はフレックスボックスを参照してください。

box-ordinal-groupCSS のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。

css
/* <integer> 値 */
box-ordinal-group: 1;
box-ordinal-group: 5;

/* グローバル値 */
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;

順序付きグループは、ボックスの直接の子が現れる順序を制御するために、 box-direction プロパティとの組み合わせで使用されることがあります。 box-direction の計算値が normal である場合、ボックスは小さい番号が付いた順序付きグループから要素を表示し、それらの要素がコンテナーの左 (水平ボックスの場合) または上端 (垂直ボックスの場合) に現れます。同じ順序付きグループの要素は、ソースの文書ツリーに現れる順序で流れます。逆の方向では、順序付きグループは要素が逆に現れた場合を除き、順序付きグループは同じ順序で現れようとします。

構文

box-ordinal-group プロパティは任意の正の <integer> で指定されます。

公式定義

初期値1
適用対象ボックス要素の子
継承なし
計算値指定通り
アニメーションの種類離散値

形式文法

Error: could not find syntax for this item

基本的な使用方法の例

古いバージョンの仕様では、 box-ordinal-group はフレックスコンテナー内の子の表ジュ順序を変更するために含まれていました。

css
article:nth-child(1) {
  -webkit-box-ordinal-group: 2
  -moz-box-ordinal-group: 2
  box-ordinal-group: 2
}

article:nth-child(2) {
  -webkit-box-ordinal-group: 1
  -moz-box-ordinal-group: 1
  box-ordinal-group: 1
}

現在のフレックスボックスの同等の機能は order です。

仕様書

どの仕様書にも含まれていません。

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
box-ordinal-group
DeprecatedNon-standard

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報