【Webデザイン CSS】flexboxを使用するときのポイント

【Webデザイン CSS】flexboxを使用するときのポイント

レイアウト・モジュールとして開発されたflexboxがとても良いのですが注意点として基本、モダンブラウザでしか対応しておらず古いブラウザだと全くレイアウトしてくれないという問題がありました。
2〜3年前だともう少し様子を見るか…。だったのですが数年前から古いブラウザ・ユーザーは自己責任という風潮が高まってきました。
それに乗っかる形で私も思い切ってflexboxを使うことにしました。
ですがユーザビリティを考えると古いブラウザ・ユーザーも無下には出来ず出来る限りのフォローをしておきます。

まずブラウザのバージョンによるflexboxの対応状況です。

・IE6〜9

論外です。
気になる方はflexは使用せずfloatなどで対応していく感じです。
現実的なのは下記HTMLコメントを使ってCSSをIEとモダンブラウザで分岐します。
IE10未満の場合、IE6〜IE9などのブラウザでウェブページを表示すると下記のスタイルシートがアクティブになります。

HTML

<!--[if lt IE 10]>
<link rel="stylesheet" href="base.css">
<![endif]-->

・IE10

ほぼ論外ですがベンダープレフィクスで対応します。

ベンダープレフィクス（接頭辞）とは

CSS3から追加されたプロパティで先頭に付ける識別子になります。
なので基本プロパティの先頭につきます。
CSSは下記になります。

CSS

display: -ms-flexbox;

次に下記ブラウザです。

・Safari 6.1〜8
・Android 2.1〜4.3
・iOS Safari 7〜8.4
・Chrome 21〜28
・Opera 15〜16

のバージョンは下記ベンダープレフィクスで対応します。

CSS

display: -webkit-flex;

そして上記のブラウザ・バージョン以降はベンダープレフィクスを付けなくても大丈夫です。

Autoprefixer

さてこのベンダープレフィクスいちいち気を付けながら付与するというのは中々大変です。
ですのでベンダープレフィクスを自動で付与してくれるサイトを利用します。

Autoprefixer CSS online

サイトの左側のテキストエリアに自作のCSSをコピペします。
すると右側のテキストエリアにベンダープレフィクスを付けて返してくれます。

それをコピーして自分のCSSに持ってきます。
Browserslistでブラウザがどの位前のバージョンか指定できます。
バージョンの古さでベンダープレフィクスの書き方が変わるようです。
画像は試しに100バージョン古いパターンを設定してみました。