パソコンとスマホでは、レイアウトが変わることはよくあると思います。
例えば、パソコンでは横並びでも、スマホだと画面幅が狭くなるから縦並びにするなど。
そして、横を縦にするだけなら難しくありませんが、順番を変えたいときもあると思います。
今回は、Flexboxを使って要素の順番を変える方法を3つ解説していきます。
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
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を増やさなくて済むので、覚えておきましょう。
以上になります。