CSSのFlexboxを古いIEにも対応させることができるスクリプト「flexibility」

要素を横並びにしたり、レイアウトを構築する時に便利なFlexboxですが、Internet Explorer8や9等の古いブラウザには対応していません。マイクロソフトのサポートも終了していますし、個人的には古いIEは無視して良いと考えていますが、Web制作の現場では古いIEにも対応しなければいけないこともあるでしょう。

古いIEを意識してFlexboxを使わないというのも一つの手です。しかし、Flexboxを使った方がレイアウトの構築がスムーズというケースも多いので、悩みどころだと思います。

そこで今回は、古いIEにFlexboxを対応させることができるスクリプト「flexibility」を紹介したいと思います。flexibilityを使えば、古いIEでもFlexboxが利用できるようになります。

flexibilityの使い方

flexibilityのダウンロードと設置

まずは、GitHubからflexibilityをダウンロードしましょう。ダウンロードしたファイルを解凍し、flexibility.jsをサーバーにアップします。

HTMLでは、</body>の直前に以下を追加して、flexibility.jsを読み込みます。

<script src="js/flexibility.js"></script>

ファイルパスは適宜変更してください。

CSSの追加

スクリプトを読み込んだら、Flexboxを適用したい要素に対して、「-js-display: flex;」を追加してあげます。

.flex-cont{
 -js-display: flex;
 display: flex;
}

「-js-display: flex;」を追加することで、IE8やIE9でもFlexboxが機能するようになります。

あとがき

どうしても古いIEに対応しなければいけない時は、ぜひ導入をご検討ください。