レイアウト
order
order は、フレックスボックスやグリッドの項目に書いて、項目を並べる順番を HTML の順番から変えます。
構文
<integer>プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
}
.box > :nth-child(2) {
order: -1;
}コントロール
order-1
1234
解説
値の書き方
整数を書きます。初期値は 0 で、項目は値の小さい順に並びます。値が同じ項目どうしは HTML に書いた順のままです。負の値も書けるので、1 つの項目だけを先頭に出すなら -1、末尾に回すなら 1 を書きます。
このページのプレビューは、補助の宣言で箱を display: flex にして、2 番目の項目だけに order を書いています（.box > :nth-child(2) は「箱の 2 番目の子」を選ぶセレクタです）。ほかの項目は初期値の 0 なので、縁取りした 2 の項目だけが先頭や末尾に動きます。
グリッドでは、項目を自動でマスに置く順番が変わります。grid-column などで置き場所を決めた項目は、order にかかわらずその場所に置かれます。
見た目の順番だけが変わる
order が変えるのは画面に並ぶ順番だけで、Tab キーでフォーカスが移る順番や、スクリーンリーダーが読み上げる順番は HTML の順番のままです。リンクやボタンを order で並べ替えると、フォーカスが行ったり来たりして使いにくくなります。内容の意味にかかわる順番は、HTML の順番で決めます。
Chrome・Edge（137 以降）では、箱に reading-flow: flex-visual を書くと、フォーカスの順番を見た目の順番に合わせられます。Firefox と Safari はまだ対応していません。