display: flex;を適用したflexコンテナーの中のflexアイテムの並び順は、通常は設定された方向にhtmlの記述が早い順に並びます。
flexアイテムにorderで並び順を設定すると、htmlの記述順を問わずにorderで指定した並び順で表示することができます。
orderを設定してflexアイテムの並び順を変更してみる
プレビュー
1
2
3
4
通常は１→２→３→４という順番で表示されるはずが、４にorder: -1;を設定しているため、４が一番左に表示されます。
解説
orderの初期値は0で、負→0→正の数順に表示されます。
↑の例では「４」のブロックにだけ「-1」を設定しているので、「４」が一番左に配置されています。
HTML例
<div class="flex-box">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
</div>
CSS例
.flex-box{display: flex;}
.flex-item{
width: 100px;
height: 100px;
display: flex;
margin: 10px;
align-items: center;
justify-content: center;
background: #eee;
color: #000;
font-size: .8em;
}
.flex-item:nth-child(4){
order: -1;
}
まとめ
orderプロパティは「PCではこの順番、スマホではこの順番」などのように、flexアイテムの順序を入れ替えて表示したい時などによく使います。
便利なプロパティなのでぜひ活用していきたいですね。
