パソコンとスマホでは、レイアウトが変わることはよくあると思います。
例えば、パソコンでは横並びでも、スマホだと画面幅が狭くなるから縦並びにするなど。
そして、横を縦にするだけなら難しくありませんが、順番を変えたいときもあると思います。
今回は、Flexboxを使って要素の順番を変える方法を3つ解説していきます。
（有料になっていたらすいません🙇♂️）
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を増やさなくて済むので、覚えておきましょう。
以上になります。
