order プロパティで Flexbox 内要素の順序を変える

• order | MDN

Flexboxを使っていると、PCとモバイルで表示順序を変えたいときがある。そんなときに order プロパティが便利そうなんだけど、指定結果がちょっと読みにくかったので確認してみる。

<ul class="flexbox">
  <li>1</li>
  <li>2</li> <!-- 2番目の順序をorderプロパティ動かす -->
  <li>3</li>
</ul>

.flexbox li:nth-child(2) {
  background-color: red;
  order: -1;
}

order: -1 を指定した場合、この要素は1番目に表示される。

• order: -1

order: 1 を指定した場合、この要素は3番目に表示される。

• order: 1

order: -2 を指定した場合、この要素は3番目にはこず、order: -1 を指定した場合と同じ結果になる。

• order: -2