【CSS】Flexboxで要素の順番を変える方法【上下逆・左右逆・順番指定】

要素の順番ってどうやって変えるの？

パソコンとスマホでは、レイアウトが変わることはよくあると思います。

例えば、パソコンでは横並びでも、スマホだと画面幅が狭くなるから縦並びにするなど。

そして、横を縦にするだけなら難しくありませんが、順番を変えたいときもあると思います。

今回は、Flexboxを使って要素の順番を変える方法を3つ解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

Flexboxで要素の順番を変える方法

Flexboxを使って要素の順番を変える方法ですが、以下の3つを解説していきます。

左右逆
上下逆
順番を指定

共通のコード

HTMLは共通でこちらになります。

<div class="container">
  <div class="box">①</div>
  <div class="box">②</div>
  <div class="box">③</div>
  <div class="box">④</div>
  <div class="box">⑤</div>
</div>

.containerの中に.boxが5つ入っています。

CSSは共通でこちらになります。

/* レイアウトのためのスタイル */
body {
  margin-inline: auto;
  margin-top: 20px;
  width: fit-content;
}
.container {
  width: 100%;
}
.box {
  font-size: 26px;
  padding: 16px;
}
.box:nth-of-type(1) {
  background-color: #e0efff;
}
.box:nth-of-type(2) {
  background-color: #cce5ff;
}
.box:nth-of-type(3) {
  background-color: #b2d8ff;
}
.box:nth-of-type(4) {
  background-color: #9cf;
}
.box:nth-of-type(5) {
  background-color: #7fbfff;
}

これは特に重要ではなく、これに追記していく形になります。

ちなみにこの状態でのデモはこちらになります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

Flexboxを使っていないので、普通に縦並びとなっています。

左右逆

左右逆ですが、まずは以下のコードを書いて横並びにします。

.container {
  display: flex;
}

こちらがデモです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これを左右逆にする場合は、flex-direction: row-reverse;を追記します。

.container {
  display: flex;
  flex-direction: row-reverse; /* 左右逆にする */
}

こちらがデモです。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

ちなみに、flex-direction: row;なら、元の左からの順番で並びます。

上下逆

次は上下逆にしてみます。

Flexboxを使わなくても縦並びになっていますが、縦並びの順番を逆にするためにFlexboxを使います。

まずは、display: flex;を書いた上でflex-direction: column;を書いてみます。

.container {
  display: flex;
  flex-direction: column; /* 縦並びにする */
}

この状態でのデモはこちら。

See the Pen
Flexbox（縦並び・逆） by junpei (@junpei-sugiyama)
on CodePen.

見た目はFlexboxを使う前と変わりませんが、Flexboxを有効にしたいときにこのような書き方をします。

そして、上下を逆にしたい場合はflex-direction: column;をflex-direction: column-reverse;にします。

.container {
  display: flex;
  flex-direction: column-reverse; /* 縦並びで逆にする */
}

デモはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

ここまでをまとめると、以下のようになります。

プロパティ名	意味
flex-direction: row;（初期値）	横並び
flex-direction: row-reverse;	横並びで逆方向
flex-direction: column;	縦並び
flex-direction: column-reverse;	縦並びで逆方向

flex-direction: row;は初期値なので、何も書かないとflex-direction: row;になります。

順番を指定

ここまでは順番を逆にするだけでしたが、この順番を指定することができます。

それには、これまでのように親要素ではなく、順番を変えたい子要素にorderを書きます。

例えば、このようになります。

.container {
  display: flex;
}
.box:nth-of-type(1) {
  order: 3;
}
.box:nth-of-type(2) {
  order: 1;
}
.box:nth-of-type(3) {
  order: 5;
}
.box:nth-of-type(4) {
  order: 2;
}
.box:nth-of-type(5) {
  order: 4;
}

要素の1つ目から5つ目まで、orderで数値を指定しています。

そして、この数値が低い順番に並びます。

つまり、この場合は『②④①⑤③』という順番になります。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

これは、横並びでも縦並びでも同じです。

要素が5つだから1〜5を使わなくてはいけないわけではなく、100や200、マイナスの数値でもOKです。

ただ、5つなら1〜5を使った方が分かりやすいですよね。