CSS ・ Flexbox・Grid
order
アイテムの並び順
Flexbox や Grid の子要素に指定し、HTML の記述順に関係なく、表示される並び順を変えます。
01
サンプルコード
HTML
1<div class="flex">
2 <div class="flex__item--01">最初の子要素</div>
3 <div class="flex__item--02">真ん中の子要素</div>
4 <div class="flex__item--03">最後の子要素</div>
5</div>
CSS
1.flex {
2 display: flex;
3 gap: 6px;
4}
5.flex > div {
6 padding: 10px 12px;
7 background: #b68235;
8 color: #fff;
9}
10.flex__item--01 {
11 order: 3;
12}
13.flex__item--02 {
14 order: 1;
15}
16.flex__item--03 {
17 order: 2;
18}
02
実行結果
ブラウザでの表示HTML では「最初・真ん中・最後」の順ですが、order の小さい順に「真ん中・最後・最初」と表示されます
03
解説
order は、display: flex の親の直下にある子要素1つ1つに指定します。値の小さいものから順に並びます。
何も指定しない子要素は 0 扱いです。そのため、1つだけ先頭にしたいときは order: -1、最後にしたいときは order: 1 を指定するだけで済みます。
スマートフォンとPCで並び順を変えたいときに、HTML を書き換えずにメディアクエリで切り替えられるのが便利な点です。
04
応用例・注意点
指定できる値
| 値 | 説明 |
|---|---|
0 | 初期値。HTML の記述順に並ぶ |
1, 2, 3 … | 小さい数値から順に並ぶ（同じ値なら HTML の順） |
-1 | 負の値も指定可能。指定のない要素（0）より前に来る |
スマートフォンだけ画像を先頭に表示する
PCでは「文章・画像」の順に横並び、スマートフォンでは縦並びにして画像を上に出します。
HTML
1<div class="media">
2 <div class="media__text">文章</div>
3 <img class="media__img" src="photo.jpg" alt="">
4</div>
CSS
1.media {
2 display: flex;
3 gap: 24px;
4}
5@media (max-width: 767px) {
6 .media {
7 flex-direction: column;
8 }
9 .media__img {
10 order: -1;
11 }
12}
注意点
- 01order は親ではなく子要素に書きます。親に display: flex（または grid）がないと効きません。
- 02変わるのは見た目の順番だけです。読み上げやタブキーでの移動は HTML の順のままなので、意味の順番が大きく変わる入れ替えは避けます。