実務でflexbox、実際使えるの?

  • 2017.05.13
  • css
NO IMAGE

手軽に横並び・グリッドレイアウトを構築可能なflexbox
実装されてしばらく経ちますが、実際案件の中でどのように使用することが出来るのか色々調べてみました。

flexboxの基本形

まず、flexboxを使用するためにdisplay要素を以下のように設定します。


.flex{
	display: -webkit-flex;
	display: flex;
}
/** インライン要素に付与する場合は以下 **/
.inline-flex{
	display: -webkit-inline-flex;
	display: inline-flex;
}

ちなみに細かいベンダープレフィックスは抜いてあります。
(対応デバイスいかんで記述が変わってしまうので)

このdisplay要素の中に入れた要素がflexboxの対象になるのですが、付与できる要素はいくつかあります。
とゆーか結構あります 笑
ざっくり言うと一個の要素を幅指定したり、下揃えしたり、折り返したり、、、
まぁできることが色々あるのですが、およそ主要な内容で今回はまとめます。

flex-direction
rowやcolumnなど、flexboxの軸方向を設定して要素を並べるプロパティです。
横並び・縦並びさせるために使用。reverseで逆向きに並べる事も出来ます。
flex-wrap
いわゆる折り返し配置ができるプロパティ。簡単にグリッド・レスポンシブなレイアウトを構成することが出来ます。
これもreverseで逆向き配置できます。
justify-content
要素の配置場所(左・中央・右)を決定するプロパティ。
spaceなんたらで等間隔揃えも実現できます。
align-items
垂直方向の位置を決定するプロパティ。コンテナの高さに合わせたり、高さの違う要素をベースラインに揃えたりできます。

ざっくりいくとこんなトコロでしょうか。
このほかにも様々な要素があるので、気になる方はW3Cなどで確認してみて下さい。
※flexboxと検索すると、いろんな方の解説記事が出てくるのでソッチ見たほうが早いかも、、、

で、実はこの中で厄介なのがひとつありまして、、、
wrapというレスポンシブレイアウトに役立つ機能なのですが、、、

ぶっちゃけ実務では使えないケースがあります。なぜかというと、、、

一部対応できないブラウザがあるwrap

主要ブラウザでは基本対応可能なこの機能。実は対応できないブラウザがあります。

そう、憎っくきAndroidデフォルトブラウザの4系です。

なぜかwrapが無効になるという謎仕様。
なんでこう制作者につらくあたるのだAndroidよ。

形式上は4.3までは使用不可。といった形になってるのですが、4.4の一部端末でも同じ現象が発生します。
そのためAndroid表示は捨てる!という覚悟がないとwrapは使えないシロモノとなってしまいます。

スクリプトで無理矢理対応する方法もあるみたいですが、正直そこまでするなら普通にfloat設定した方が早いでしょう。
Androidのデフォルトブラウザ、意外と使ってる人いたりするので切り捨てるのもなかなか難しいですし、flexへの切り替え時に悩みますね。

結果flexはどのように使えばいいのか

Androidユーザーの皆さんが全てchoromeとかに切り替えてくれたら言うこと無しなんでしょうが、なかなかそういう訳にもいきません。
なのでflexでの折り返しはfloatで代用し、折り返さない横並びの要素なんかにflexを使用するのが現状はいいかと思います。
早くchoromeをデフォルトブラウザにしてくれAndroid 泣

また、最近css-gridなるものも実装されて、モダンブラウザで使用可能になったみたいです。
対応ブラウザが限られてるので実務で使うにはまだ早い気もしますが、今のうちに使って慣れとくのもいいかもしれないですね。

cssカテゴリの最新記事