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

こちらの記事も読まれています

WordPressでcssを追加・修正したけど反映しない!cssが効かない時に確認するコト... こんばんわtaisonです。 最近ウチのウサギが1歳の誕生日を迎えまして、 嫁がお祝いということでリンゴとにんじんで作ったケーキを目の前に置いたんですが、、、 全く食べず 笑 食べてる写真を収めたくて奮闘してたんですけど、目の前に置いても口元に置いてもウンともスンとも言わず、、、...
css font-kerningを使ってwebで欧文の文字詰めをする... こんばんわ。taisonです。 皆さん、見出しやキャッチコピーで大きな文字を扱うことってありますよね。 シンプルなデザインにどかーん!と欧文文字が入ってたりすると、それだけでブランドイメージを伝えるのも難しくありません。 (まあ欧文使ったwebサイト作ることって、実際は少ないですけど) ...
mix-blend-mode exclusionを使っておしゃれなデザインを実現してみる... こんばんは!taisonです。 ここのところ構成考える仕事が多く、あまりcssに手をつけていませんでした 汗 気を取り直して更新していきたいと思います! さて、今回はおしゃれなサイト制作にはうってつけな、あるcssをご紹介したいと思います。 photoshopやillustratorでお...
web制作にsass(scss)を使う場合の注意点 こんばんは、taisonです。 先日の記事で、sass(scss)(以下sassといいます。) という言語について触れました。 今一度sass(scss)を正しく勉強する!脱初心者への道 第1弾! 今回は、 sassってそもそもどういう時に使うの?どんな使い方がいいの? エラーが...

cssカテゴリの最新記事