要素の順番を入れ替えられるflexboxのorderを活用しよう

Flexboxはスマートフォン用のCSSに適用させる

レスポンシブサイトを作る時に便利なFlexbox・・・非常に使い勝手がいいものの、IEなどの一部のブラウザでは対応していないものもいくつかあるので、なかなか使う事ができません。
早く対応するブラウザばかりになってもらいたいものですが、古いOSを使い続ける方がいたり、どうしても前のバージョンのブラウザを使わなければいけない理由があったりと、古いものや対応しきれていないものを切り替えるタイミングが難しいものです。
そうした状況の中で、Flexboxはなかなか使う事ができないなぁと思っていました。以前までは。

CSS3に完全対応していない環境になっているものはさすがに移行できませんが、スマートフォンであれば多くの端末でCSS3に対応したブラウザがインストールされています。
スマートフォン向けのWebサイトなら「Flexboxが使える」という事ですね。

スマートフォン向けだけでもFlexboxを使う価値がある

スマートフォン専用ページを作る場合、コンテンツの並び順やレイアウト等、無理にFlexboxを使う必要もありません。
ですがレスポンシブサイトの場合はどうかと考えると、コンテンツの並び順を入れ替える「order」がとても使いやすそうです。

PCの時はこの配列だけど、スマートフォンの時はここだけ上下入れ替えて配列したい・・・と思う場面はよくあります。
そういう時にpositionを使って力業で配置するのも一つの方法ですが、positionの為、ブロックの高さや横幅のスペースをあらかじめ取っておくのは大変です。JavaScriptを活用しないとできなかったりするので、作業が大変ですね。
PCの時はこの配置にしたいからこの順番でソースを書く・・・スマホの時は変えたいからorderで順番を付けるという事ができます。そうFlexboxならね。

あらかじめFlexboxを使おうと思って組んでおけばいいだけなので、別途JavaScriptを使って、画像の高さを取得して・・・画像の入るブロックに最低高として画像の高さを入れて・・・とかいうこともなくなります。
メディアクエリで切り替えるので、厳密に言えばパソコンでもFlexboxを使う事になります。ですがブラウザの幅をわざわざ420px以下の状態にしてページを見るのは稀です。

orderの使い方

flexboxを使う場合、親要素に「display:flexbox;」を与えます。
次に順番を入れ替える場合は、その子要素に「order:順番を示す数字;」を個別に与える事で、表示させる順序を入れ替える事ができるようになります。

HTMLソースを見るとこんな感じです。

CSSの記述がなにやら多いですが、念のためブラウザ毎の対応も記述してあります。
こうする事で、中の要素を配置する順序を入れ替える事ができるので、配置を変えるときには便利ですね。

さきほどのHTMLが

の順番で入れ替わるので、後はCSSを使って配置を変えていけば対応できます。

孫要素は効かない

気を付けたいのが、子要素の順番が入れ替わるだけという事です。

もし、このように記述しても

このような配置になります

なので、思ったのと違う・・・とならないように注意が必要です。

まとめ

Flexboxはfloatなどを使ったレイアウト配置と異なり、おもしろい挙動をするCSSです。
使い方やクセがあるので、しっかり理解してからでないと予想外の動きをします。
気軽に使うと、後で痛い思いをすることもあるので、利用前は必ず確認をしておくことをお勧めします。

ですが使いこなせれば、レスポンシブサイトの配置で困っていた事や、一部の手間を省いたりと、なにかと便利です。
早くPCサイトでも問題なく使えるようになりたいものですが、古い環境で見れないか？という縛りはなかなか消える事がありません。
サポートが切れてしまっていても、利用者が完全にゼロになる事はないので、どこまで対応ブラウザにするのか？いつまで対応するのか？という事を事前に決めておかなければなりませんし、閲覧者から「お宅のサイト、見れないよ」と言われた時には事情を説明するか、修正するかしかありません。
「お使いのブラウザがサポートが終了していまして」と話しても、なかなか納得されない事もあろうかと思うので難しい部分です。

なのでPC用は従来方式、スマートフォン用はCSS3をフル活用するといった使い分けが、今のところ有効ですね。
早くCSS3で出来る事を全部使ってみたいものです。早くしないとCSS4とか5とかが出てきてしまうかもしれませんので、時代に置いていかれてしまいますしね！