CSSにおけるフレックスブロックの順序

次のような一列に並んだブロックがあるとします：

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}

HTMLコード内の順序を変えずに、画面上での表示順序を変更してみましょう。

このために、orderプロパティが存在します。このプロパティは特定の要素の順序を次のルールで設定します：値が大きい要素ほど軸の終端に近く、値が小さい要素ほど軸の始端に近くなります。

プロパティの値は正の数または負の数を取ることができます。デフォルトではすべての要素が互いに順番に続くため、これはそれらのorderがゼロであることを意味します。

要素の順序を変更してみましょう。そのために、2番目の要素に追加クラスelemを設定し、このクラスに対してorderプロパティを値1に設定します：

.elem {
	order: 1;
	border: 1px solid red;
}

すべての要素はデフォルトで順序0を持ち、2番目の要素は他の要素よりも順序が大きくなるため、それは他の要素の後に配置されます：

次に、負の値-1を設定してみましょう：

.elem {
	order: -1;
	border: 1px solid red;
}

この場合、ブロックは軸の始端に移動します：

このプロパティの動作を、さまざまな軸の方向で自分で試してみてください。