CSS box-ordinal-group プロパティ
非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。
非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。
警告: これはオリジナルの CSS フレックスボックスレイアウトモジュールの草稿のプロパティで、より新しい標準に置き換えられました。現在の標準についての情報は フレックスボックス を参照してください。
box-ordinal-group は CSS のプロパティで、フレックスボックスの子要素を順序付きグループに割り当てます。
順序グループは、 box-direction プロパティと組み合わせて使うことで、ボックスの直接の子要素の表示順序を制御できます。計算された box-direction が normal の場合、ボックスは最も番号の小さい順序グループから要素を表示し、それらの要素がコンテナの左側（水平方向のボックスの場合）または上部（垂直方向のボックスの場合）に表示されるようにします。同じ順序グループの要素は、ソース文書ツリー上の記述順に並べられます。逆方向の場合、順序グループは同じ順序で調べられますが、要素の表示順序は逆になります。
構文
/* <integer> 値 */
box-ordinal-group: 1;
box-ordinal-group: 5;
/* グローバル値 */
box-ordinal-group: inherit;
box-ordinal-group: initial;
box-ordinal-group: unset;
box-ordinal-group プロパティは任意の正の <integer> で指定されます。
公式定義
| 初期値 | 1 |
|---|---|
| 適用対象 | ボックス要素の子 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 離散値 |
形式文法
box-ordinal-group =
<integer>
<integer> =
<number-token>
例
基本的な使用方法の例
古いバージョンの仕様では、 box-ordinal-group はフレックスコンテナー内の子の表示順序を変更するために含まれていました。
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 です。
仕様書
どの仕様書にも含まれていません。