【Flexbox】要素の表示順を自由に変えるorderの使い方

チャッピー

Flexboxを使ってて、HTMLの並び順とは違う順番で要素を表示したい場合はどうしたらいいの？

こばゆた

そんなときに使えるのが order プロパティです！

今回はorder の基本的な使い方・注意点・実用例をわかりやすく解説します。

1.orderとは

通常、要素は書いた順に配置されますがFlexboxで並んだアイテムはorderプロパティを使い、値に数字を入れることで順序を変えることができます。

また初期値には”0“が振られています。

.container{
  display: flex;
}

セレクター{
  order: 値;
}

例１：値を１にした場合

こばゆた

例として3番の箱を一番右にしてみます

.container{
  display: flex;
}

.box3{
  order: 1;
}

こばゆた

3番の箱は一番右に移動しました！

また値にはマイナスも使えます
マイナスを使うどうなるでしょうか？

例2：値をマイナスにした場合

.container{
  display: flex;
}
.box3{
  order: -1;
}

こばゆた

他は初期値の”0″なのでそれらの左にいきました

例2：それぞれ値を指定した場合

こばゆた

全ての子要素に値を指定すれば順番も自由に指定できます

例として246135の順で並べてみました

.container{
  display: flex;
}

.box1{
  order: 4;
}

.box2{
  order: 1;
}

.box3{
  order: 5;
}

.box4{
  order: 2;
}

.box5{
  order: 6;
}

.box6{
  order: 3;
}

任意の順番にできました！

ですがここまで入れ替えるとHTMLから作り直した方が良い気もしますが今回は例として取り上げました。

See the Pen order by kbyt (@kbo58) on CodePen.

2.よく使われるケース

orderプロパティはスマホ・PCでレイアウト順を変えたいときによく使われます。

こばゆた

スマホでは「テキスト→画像」、PCでは「画像→テキスト」のような順番にしたいという時の例です。

画面幅を広げたり狭めたりして下の例を見てみてください。

See the Pen Untitled by kbyt (@kbo58) on CodePen.

きなこ

テキストと画像が入れ替わってる！

こばゆた

このようにレスポンシブ対応のレイアウトで大活躍します！

3.注意点

orderは見た目上の順序が変わっているだけで、HTMLの構造自体はそのままであることに注意です。

4.まとめ

.container{
  display: flex; /* 親要素にdisplay: flex;を指定 */
}

セレクター{
  order: 値;
}