FlexboxをIE8/9対応する

構築・開発

flexboxを使い始めるとfloatやinline-blockといったレイアウト組が面倒に感じるほど簡単にレイアウトコーディングすることができます。
スマホサイトとかであればあまり気にすることなく使えるのですが、PCサイトの場合は、IEが対応していないため使い所に困ります。
IEを10以上とか最新のみであればいいのですが、まだまだそういうわけにはいきません。
※スマホでも古いOSなどでは、プレフィックスが必要だったりします。

 

そこで、対応していないIE8と9でも補完してくれるスクリプトがあります。

まず、flexibility.jsを読み込みます。

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

次にCSSファイルに一行 -js-display: flex; を追加します。

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

※インラインでも外部cssファイル内でもどちらでも問題ありません。

 

ここまでは、色々な使い方サイトに解説があるのですが、これだけでは、動きませんでした。
配布元のgitのドキュメントを読んでみると、下記一文が必要でした。

flexibility(document.documentElement);

どの解説サイトを見てもこの実行の一文が抜けてるのはなぜなんだろう??

GitHub – jonathantneal/flexibility: A JavaScript polyfill for Flexbox

 

読み込みするときには、IEを9以下という条件に入れておいたほうがよいと思います。

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

 

Flexboxの使い方は、下記を参考にしてください。

コメント

スポンサーリンク
タイトルとURLをコピーしました