こんにちは朱夏です。
今回は、CSSのフレックスボックス内の要素の順番を入れ替える方法を解説したいと思います。
要素の並び順を自分の好きな並びに変更したい。
通常要素は、HTMLで書かれた順番に上から下、左から右へ並びます。
「order」を使えば、横並びの要素を左から右ではなく自分が決めた順番で並べる事が可能です。
それではいってみましょう。
「order」の書き方
「order」の使い道
あとがき
「order」の書き方
「order」は、順番を変更したい要素１つ１つに対して整数で順番を付けていきます。
サンプルはこんな感じです。
See the Pen
WNQxjwY by 朱夏 (@syunatsu1)
on CodePen.
HTMLではBOX1、BOX2の順番で書かれていますが、「order」を使って順番を入れ替えました。
「order」を書くときのポイントは以下です。
- 整数で指定する
- 1から順に表示される
- フレックスボックス内の要素のみに指定できる
これを使えば、CSSで表示を好きな順番に変更する事が出来ます。
「order」の使い道
CSSで順番を入れ替える事が出来る「order」ですが、気づいた方もいたかもしれませんが、HTMLの順番を書き換えれば、そもそも「order」を使う必要がないんですよね。
では、「order」をどこで使うのかというと、レスポンシブ対応をする時に使われます。
例えば、PCで表示させるときと、スマホで表示させるときで「order」で指定する順番を変えることで、PCでは右に表示させた要素を、スマホ版では上に表示させるといった事が可能です。
あとがき
というわけで、「order」を使って表示順を変更する方法について書いてみました。
今回のまとめはこちら。
- 「order」でフレックスボックス内の要素の表示順を入れ替える
- １から順に表示される
- レスポンシブ対応で使われることが多い
基本的にはHTMLで書かれた順番に表示されるので、CSSで表示を入れ替えて表示させることで、レスポンシブデザインの幅を広げる事が出来ると思います。
今回は以上です。
次回もよろしくお願いします。
