Flexbox前々から気にはなっていましたが、対応ブラウザ的に厳しいかなぁと思って使ったことが無かったのですが最近は結構頻繁に使っています。Flexboxを使った方がレイアウトを組むのも速いですし、orderプロパティで要素の順番を操作できるので、スマホでもデスクトップでも無理なくレスポンシブデザインを再現できます。
まぁ最悪無理にデスクトップにFlexbox使わなくても、スマホ使うだけで従来のコーディングよりザインの幅が広がります。
Flexboxはレスポンシブのスマホにだけでも利用価値はある
レスポンシブデザインでスマホのときだけこのパーツ入れ替えたい、ってことがよくあります。特に一覧系ページです。僕的には一覧系ページってスマホとデスクトップをユニークでデザインしたい！って衝動にかられるNo1のページです。CSSだけで簡単に要素の順序をを入れ替えられるFlexboxのOrderを使うと一覧系デザインも大人の事情なしにデザインできるので、変な汗をかかなくてすみます。
子要素にorderを付与して順番を調整する
Flexboxはコンテナになる要素にdisplay: flex;を付与することによりその中の子要素の調整を色々行うことが可能になります。そしてコンテナ内の要素にorder:順番;で順番を付与することにより、子要素の並び順を制御できたりします。
このデザインを
スマホのときは順序を入れ替えてこんな感じで再現できます。ちなみにロゴが入れ替わっています。
Flexboxのorderを使って実際に組んでみた
てなわけで上のデザインカンプを実際に組んでみました。
コード
html
<div class="fl-test01">
<div class="fl-test-wrap">
<div class="fl-test-flex">
<div class="fbox1">
<img src="images/testimg/flbox-img01.png" alt="">
</div>
<div class="fbox2">
<img src="images/testimg/flbox-img02.png" alt="">
</div>
<div class="fbox3">
<img src="images/testimg/flbox-img03.png" alt="">
</div>
<div class="fbox4">
<img src="images/testimg/flbox-img04.png" alt="">
</div>
</div>
</div>
</div>
コンテナのcss
長くなるのでFlexboxの要素に関係あるところだけ記述します。flex-wrap:wrap;は領域を超えたら折り返す指定です。
div.fl-test-flex{
display:-webkit-box;
display: -webkit-flex;
display:-ms-flexbox;
display: flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
コンテナ内の要素のCSS
orderで表示順を制御
//スマホ
div.fbox1{
-webkit-box-ordinal-group:3;
-ms-flex-order:3;
-webkit-order:3;
order:3;
}
div.fbox2{
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
div.fbox3{
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
div.fbox4{
-webkit-box-ordinal-group:0;
-ms-flex-order:0;
-webkit-order:0;
order:0;
}
//デスクトップ
div.fbox1{
-webkit-box-ordinal-group:0;
-ms-flex-order:0;
-webkit-order:0;
order:0;
}
div.fbox2{
-webkit-box-ordinal-group:1;
-ms-flex-order:1;
-webkit-order:1;
order:1;
}
div.fbox3{
-webkit-box-ordinal-group:2;
-ms-flex-order:2;
-webkit-order:2;
order:2;
}
div.fbox4{
-webkit-box-ordinal-group:3;
-ms-flex-order:3;
-webkit-order:3;
order:3;
}
実際に組み込んだ感じ
レスポンシブです。
安全なのはデスクトップは従来の組み方、スマホにFlexbox
デスクトップには従来のコーディングでスマホにFlexboxを使うのが安全なのかなぁと個人的には思っています。flexibility.jsでIE9、8に対応できるらしいのですが、当ブログではうまく効かなかったです。原因はSVGを使っていたからです。
flexibility.jsを導入してSVGを読み込んでいないサンプルページを作成してみました。実機で検証したらしっかりIE9、8に対応していました。
flexibility.jsの導入方法
- こちらからダウンロドします。
- distフォルダに入っているflexibility.jsを読み込みます。
- コンテナに
-js-display: flex;を記述します。
flexibility.jsはどこで読んでもOK
flexibility.jsはヘッダーでもフッターあたりでもどちらで読み込んでもOKです。jQueryも必要ありません。条件付きコメントで読み込めばいいと思います。
<!--[if lte IE 9]> <script src="js/flexibility.js"></script> <![endif]-->
用例
.fl-container{
-js-display: flex;
display:-webkit-box;
display: -webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display: flex;
}
orderも使えました！そして検証は実機かヴァーチャルマシンを使う必要があります。IEのF12では検証できません！幸いMicrosoftがヴァーチャルマシン用のOSを提供しれくれています。
ただこの仮想環境構築は容量的にエグいです。一つ作成するのに10Gぐらい持っていかれます。なのでダウンロードもめっさ時間かかります。
