1. ウェブ
  2. CSS
  3. リファレンス
  4. プロパティ
  5. box-ordinal-group

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

CSS box-ordinal-group プロパティ

Deprecated

Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

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

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

順序グループは、 box-direction プロパティと組み合わせて使うことで、ボックスの直接の子要素の表示順序を制御できます。計算された box-direction が normal の場合、ボックスは最も番号の小さい順序グループから要素を表示し、それらの要素がコンテナの左側（水平方向のボックスの場合）または上部（垂直方向のボックスの場合）に表示されるようにします。同じ順序グループの要素は、ソース文書ツリー上の記述順に並べられます。逆方向の場合、順序グループは同じ順序で調べられますが、要素の表示順序は逆になります。

構文

css
/* <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>
この構文は CSS Values and Units Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

基本的な使用方法の例

古いバージョンの仕様では、 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 です。

仕様書

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

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告