CSS flexで要素の並び順を指定する方法【order】

flexboxで整列する際、要素の並び順を指定する方法をご紹介します。

早速完成品のコード

See the Pen flex-order by WEB-DEN (@Yukiwebcreate) on CodePen.

今回必要となるのはorderです。

flexを指定した要素の、子要素となるものに対してorderを１や２として設定することで並び順を指定できるのです。

.container {
  display: flex;
}
.order1{
  order:1;
}
.order2{
  order:2;
}
.order3{
  order:3;
}

コーディングの実務では例えば、

PCの時はテキストが左、画像が右に配置されるようにし、

スマホの時は上下の二段組みになって画像が上、テキストが下となるようにコーディングする

といったことがあるのでこういうケースでorderを操れるとかなり重宝しますね。

是非皆さんも使ってみてください！