<integer>整数で順序グループを決める
-1、0、2のような整数を指定します。小数やpxなどの単位付きの値は使いません。
order
FlexboxやGridの項目を、整数の小さい順に見た目上並べるプロパティ。HTMLの順序を保ったまま、強調した項目が移動する様子を比べられます。
遊んでみよう
HTML順は 1 → 2 → 3 → 4 → 5 → X のまま
1-22-1304152X変更
CSS
.element order: 0;
値のパターン
orderの構成要素
smaller → larger小さい値から先に並べる
負数は0より前、正数は0より後の順序グループとして配置されます。
source order同じ値ならHTML順を保つ
orderが同じ項目どうしは、HTMLのソースコードに書かれた順番で並びます。
早見表
初期値は0です。値そのものが「何番目」を表すのではなく、整数の小さいグループから順に並ぶ点を押さえます。
01
-20より前のグループへ移す負の整数02
-1初期値0の項目より前へ移すよく使う03
0初期の順序グループに置く初期値04
1初期値0の項目より後へ移す正の整数05
21より後の順序グループへ移す正の整数06
inherit親要素の指定値を受け継ぐグローバルよくある使い方
01
注目カードを見た目の先頭へ置く
同じ重要度のカード一覧で、注目カードだけに負数を指定すると、初期値0のカードより前へ置けます。
.featured-card { order: -1; }02
装飾画像を文章の後ろへ移す
Flexboxのカード内で、内容の意味を変えない装飾画像へ正数を指定し、見た目の末尾へ移せます。
.card__decoration { order: 1; }03
Grid項目の自動配置順を調整する
Grid項目にもorderを指定でき、値が小さい項目から自動配置の対象になります。
.dashboard__summary { order: -1; }ポイント
見た目だけを並べ替えて、読む順序を壊さない。
orderが変えるのは視覚上の並びです。HTMLのDOM順、スクリーンリーダーの読み上げ順、キーボードのフォーカス順は変わりません。内容を理解する順序や操作順に意味がある場合は、orderで見た目だけを入れ替えず、HTMLを正しい順序で書きます。orderはFlexboxやGridの項目に適用され、子要素へ継承されません。
関連するCSSも見てみよう。
order と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。