IE8・IE9でもフレックスボックスを対応させるには!?

75 views

IE8・IE9でもフレックスボックスを対応させるには!?

みなさん、フレックスボックスってご存知ですか?
英語で書くとFlexbox。
一言でいうと、簡単にレイアウトが組めるフレキスブルなボックスです。

フレキスブルなボックスにはFlexboxの他にも、boxorientというものがあります。
今記事は、boxorientではなくFlexboxについて紹介します。

このFlexbox、macやwin chrome、
IE11などには対応しているのですが、
IE8やIE9といった古いブラウザには対応しておらず上手く表示されません。
にっくきIE…

なら諦めるしかないのか?と考えているWeb制作者もいるかもしれません。
しかし、その悩みを今記事で解決します!

Flexboxでできること

Flexboxを使うと下記のようなことができます!

  • CSSに1行追加するだけで、簡単に横並びのデザインに
  • 要素を好きな順序で並べ替えできる
  • 高さが異なっていても、簡単に上下中央揃えができる
  • 画面を縮めたり大きくしたりすると、
    要素も合わせて動くのでカラム落ちなどの心配がない

上記の他にもまだあるかもしれません!

上記画像にもありますように、IE11からは正式にサポートしていますが、
IE9やIE8には対応していません。

サイトによって切り捨てるということもありますが、
対応しなければいけないときもあるかもしれません。

Flexboxは各ブラウザに対応した書き方がある

上記で記述するとどのブラウザでもFlexboxが使えますが、
IE9やIE8などの古いブラウザでは使えません。

ではどのように古いブラウザで対応させるのでしょう?

jsで対応させよう!

flexibility.jsというjsを使い対応させます。
これは古いブラウザでも対応することができるjsです。

それではさっそくflexibility.jsを使っていきましょう。

jsをダウンロード

まずflexibility.jsをダウンロードします。

ダウンロードした中に「flexibility.js」というjsファイルがありますので、
そちらをページに読み込ませます。

cssに一文を追記

Flexboxの記述がある箇所に-js-display: flex;と記述します。
cssはそれだけです。

しかし!
ここまではいろいろなサイトに書いてあるのですが、これだけで動きませんでした。

結論からいますと下記の記述をしなければいけません。

配布元のドキュメントを読むと、真ん中らへんに「下記のJavaScriptを使います。」と書かれてあり、一緒にこの一文もありました。
flexibility(document.documentElement);

自分はこの罠にハマってしまい、調べるのに見事時間を費やしてしまいました。

なぜどこのサイトを読んでもこの一文が抜けているのでしょう??