IE8/9でflexboxを使う方法

floatなどを使わなくても、簡単にフレキシブルなレイアウトを組めるflexboxを、IE8/9に対応させる方法をご紹介します。flexboxに対応していないのは、IE8/9とOperaくらいなので、IE8/9対応だけさせておけば良いでしょう。

IE8/9対応には、flexibility.jsを使う

flexboxをIE8/9対応させるには、flexibility.jsを使うのが主流です。

▼Githubはコチラ

Github|jonathantneal/flexibility: A JavaScript polyfill for Flexbox

https://github.com/jonathantneal/flexibility

手順①:flexbility.jsをダウンロード

作者のGithubから、flexibility.jsをダウンロードします。

[Download ZIP]をクリックしてダウンロードし、distフォルダー内にあるflexibility.jsをWebサイトから読み込みできるところに格納します。

手順②:Webサイトからflexibility.jsを読み込む

任意の場所に格納したflexibility.jsをscriptタグで読み込んでください。

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

手順③:CSSに一行追記する

CSSで、flexboxの親要素に、「-js-display: flex;」と一行追記してください。

CSS .container { -js-display: flex; display: flex; }

手順④:scriptタグに一行追記する

HTML <script> $(function(){ flexibility(document.documentElement); }); </script>

この場合、IE9以下でのみ読み込ませる方がスマートです。

HTML <!--[if lte IE 9]> <script src="js/flexibility.js"> <script> $(function(){ flexibility(document.documentElement); }); </script> <![endif]-->

以上で、flexboxのIE8/9対応は完了です!上記のやり方はGithubにも記載されているので、うまくできない場合はそちらをご確認ください。

▼Githubはコチラ

Github|jonathantneal/flexibility: A JavaScript polyfill for Flexbox

https://github.com/jonathantneal/flexibility

コメントを残す