Flexboxは過去に2回仕様が変更されており、現状3つの仕様があります。古い機種やブラウザは古い仕様にしか対応していないため、Flexboxを採用する場合はどの機種、どのブラウザに対応させる必要があるのか把握しておく必要があります。
Flexboxの仕様
box仕様が古いChromeやSafariが採用していた仕様で、flexbox仕様がIE10のみ採用している仕様、flex仕様が現行の仕様です。各仕様以下のようにベンダープレフィックスを付与してFlexboxに対応させることができますが、box仕様にはブラウザに実装されていないプロパティも存在しますので、box仕様がFlexbox導入の鬼門になります。
| box仕様 | flexbox仕様 | flex仕様 |
|---|---|---|
| display:-webkit-box; | display:-ms-flexbox; | display: -webkit-flex; display: flex; |
box仕様のブラウザシェア
Flexbox導入の鬼門であるbox仕様のブラウザシェアを、僕がアクセスを管理している複数のサイトで調べてみました。
| ブラウザ | 対応バージョン | シェア |
|---|---|---|
| Chrome | 4〜20 | 1％未満 |
| AndroidBrowser | 2.1〜4.3 | 10％未満 |
| Safari iOS | 3.2〜6.1 | 1％未満 |
| Safari OSX | 3.1〜6 | 1％未満 |
厄介なことにAndroidブラウザのシェアがBtoCのサイトでは10％近くありました。BtoBはそれの半分ぐらいでした。Androidブラウザ以外は切り捨てても問題なさそうな数値です。
Androidブラウザについて
Androidブラウザのサポートは終了しております。脆弱性対策も行われておりませんので最もセキュリティリスクの高いブラウザの一つだと言えます。
Flexboxの対応とは直接関係ありませんがAndroidブラウザでアクセスがあった場合は警告を表示し、他のブラウザへの乗り換えを促す仕組みを追加したほうがユーザーのためと言えそうです。
box仕様の対応
box仕様の対応はAndroidブラウザの考え方次第って結論になります。しかし前述の通りAndroidブラウザはサポートが切れており、セキュリティリスクの高いブラウザですので、他のブラウザへの乗り換えを促しつつbox仕様は未対応でも問題ないと思われます。
flex-wrapが未実装
box仕様ではflex-wrapがブラウザに実装されていないので、flexコンテナ内のアイテムを一行で表示するか折り返して表示するかの指定ができません。
flexbox仕様とIE10のシェア
IEの平均シェアが13％弱で10のシェアがその中から3％前後、全体の0.4％程度がIE10のシェアになりますので、数値的には切り捨てて問題なさそうです。
そしてIE10もAndroidブラウザ同様にサポートが終了しているブラウザになりますので、他のブラウザへの乗り換えを促したほうが良いかもしれません。
IE8・IE9はflexibility.jsで対応
IE8や9はflexibility.jsを利用することにより対応させることが可能です。諸々注意点に関してはこちらの記事を参照していただければと思います。
まとめ
ブラウザのサポート状況、シェアを考慮すると、Flexbox導入時は、現行のflex仕様のみの対応で大丈夫かと思います。なのでベンダープレフィックスも-webkit-のみでOKだと思われます。
Flexboxでレイアウトを構成した場合、対応していないブラウザではえげつない崩れ方をするので、サポート範囲の確認は必須です。
サイトの仕様がふわっとしている場合はレイアウトの重要な箇所ではFlexboxの使用は控えたほうが賢明です。
