CSS Web制作

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

まとめ

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

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

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作
-