order：フレックスやグリッドのコンテナに並ぶアイテムの順序を指定する

orderプロパティの説明

orderは、フレックス・ボックスやグリッド・レイアウトのコンテナに並ぶアイテムの順序を指定します。アイテムは、このプロパティに指定された値の昇順で並び、更にソースコード上の順序で配置されます。

指定箇所はコンテナに配置されるアイテムとなる要素です。orderの値は数値で指定します。複数のアイテムに同じ値を指定すると、順序のグループとなります。

orderに指定できる値

<integer>

アイテムの順序を表す値です。複数のアイテムに同じ値が指定されると、グループとして扱われます。

orderの使い方とサンプル

orderプロパティの構文は以下の通りです。

/* <integer>値 */
order: 1;
order: 3;
order: -3;

/* グローバル値 */
order: inherit;
order: initial;
order: revert;
order: unset;

orderの実例

それでは実際にorderプロパティの書き方を見ていきましょう。以下の例は、displayにflexを指定したコンテナにアイテムを配置し、先頭のアイテムに異なるorderの値を指定した場合の比較です。

orderの値が等しいアイテムは、同等の優先順位を持つグループとなりますが、ソースコードで先に書かれている方が優先的に配置されます。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem;
	background: #eee;
	resize: horizontal;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.flex_box {
	margin: .5rem 0 0;
	display: flex;
	gap: 1rem;
}
.flex_box div {
	width: 20%;
	padding: .3rem;
	background: #09f;
	color: #fff;
	text-align: center;
	flex: 1 1 auto;
}
.flex_box div:first-of-type {
	background: #f60;
}
.ord_1 {
	order: 1;
}
.ord_2 {
	order: 2;
}
.ord_3 {
	order: 3;
}
.ord_4 {
	order: 4;
}
.ord_5 {
	order: 5;
}

<div class="samp_box">
	<h2>先頭のアイテム order: 1;</h2>
	<section class="flex_box">
		<div class="ord_1">Order 1</div>
		<div class="ord_2">2</div>
		<div class="ord_3">3</div>
		<div class="ord_4">4</div>
		<div class="ord_5">5</div>
	</section>
	<h2>先頭のアイテム order: 3;</h2>
	<section class="flex_box">
		<div class="ord_3">Order 3</div>
		<div class="ord_2">2</div>
		<div class="ord_3">3</div>
		<div class="ord_4">4</div>
		<div class="ord_5">5</div>
	</section>
	<h2>先頭のアイテム order: 5;</h2>
	<section class="flex_box">
		<div class="ord_5">Order 5</div>
		<div class="ord_2">2</div>
		<div class="ord_3">3</div>
		<div class="ord_4">4</div>
		<div class="ord_5">5</div>
	</section>
</div>