CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 完全無料
  • 30日間でWeb制作を学べる
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 毎日人数制限ありの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
(有料になっていたらすいません🙇‍♂️)

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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を使った方が分かりやすいですよね。

まとめ

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

これらの方法を知っていれば、無駄にHTMLを増やさなくて済むので、覚えておきましょう。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

-CSS, Web制作
-