FlexboxはCSSによるレイアウト作成の人気の方法です。

しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱えています。

今回は、2019年最新のFlexboxのブラウザ対応状況とベンダープレフィックスの記述方法についてご説明したいと思います。

Flexboxの基本的な使い方は下記の記事を参考にしてください。

スポンサーリンク

Flexboxのブラウザ対応状況

Can I Useによると、2019年1月現在のFlexboxのブラウザ対応状況は、基本的にどのブラウザも最新バージョンではFlexboxに対応しています。

ただし、シェアは高くありませんが下記のブラウザには注意が必要です。

IE 6-9 非対応
IE 10 ベンダープレフィックス(-ms-)が必要
Safari 6.1-8 ベンダープレフィックス(-webkit-)が必要
Android 2.1-4.3 ベンダープレフィックス(-webkit-)が必要
iOS Safari 7-8.4 ベンダープレフィックス(-webkit-)が必要

IE 6-9では、Flexboxを使用することができません。これらが推奨環境に含まれてしまっている場合はFlexboxを使用するのを避けましょう。

また、IE 10ではベンダープレフィックス(-ms-)を付けないと正しく表示されないので、こちらも注意が必要です。

さらに、iOSやAndroidなどもバージョンが古いとベンダープレフィックス(-webkit-)を付けなければ表示崩れが起きてしまいます。スマホ端末は、バージョンアップされていないものもいくつかあるため、念のためにベンダープレフィックスを付けてコーディングした方がいいでしょう。

ほとんど気にする必要はありませんが、その他の注意すべきブラウザは下記の通りです。

Chrome 21-28 ベンダープレフィックス(-webkit-)が必要
Opera 10-11.5 非対応
Opera 15-16 ベンダープレフィックス(-webkit-)が必要

IEは最新版でも注意が必要!

何かと話題になりやすいInternet Explorerですが、最新のIE 11でもいくつかバグが報告されているため、Flexboxを使用する場合はIEでの動作確認を行った方がいいでしょう。

Flexboxのベンダープレフィックス一覧

下記にFlexboxに関連するCSSのプロパティのベンダープレフィックスの記述方法をご紹介しておきます。

これらは、PreprosのAutoPrefixer(-ms-系と-webkit-系に対応)を使って出力されたベンダープレフィックスを記述しています。

いちいち自分でベンダープレフィックスを付けたくない場合は、AutoPrefixerを使用するのがおすすめです。

Flexコンテナのベンダープレフィックス

まず、親要素となるFlexコンテナのプロパティのベンダープレフィックスの一覧です。

display: flex;

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

flex-wrap: wrap;

flex-wrap: nowrap;

flex-wrap: wrap-reverse;

flex-flow:row wrap;

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-content: stretch;

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-between;

align-content: space-around;

Flexアイテムのベンダープレフィックス

次に、子要素となるFlexアイテムのベンダープレフィックスの一覧です。

order:1;

flex-grow:1;

flex-shrink:1;

flex-basis: 10%;

flex:1 1 10%;

align-self:auto;

align-self: flex-start;

align-self: flex-end;

align-self: center;

align-self: baseline;

align-self: stretch;

まとめ

少し前までは、クライアント案件や商用のサイトなどでは使いづらかったFlexboxですが、現在ではFlexboxを使用してレイアウトを作る方法はすでに一般的になっています。

一部のバージョンが古いブラウザでは対応していなかったりベンダープレフィックスが必要になりますが、それらのシェアも実際はほとんど0に近いので、気にしなくていいでしょう。

Flexboxを使いこなせうようになると、CSSによるレイアウト作成を簡潔なコードで行えるようになるため、効率的にコーディング作業を行うことができるようになります。

ぜひFlexboxを使ってWebコーディングに挑戦してみてください!

おすすめの記事