Tweet

Pocket

簡単にCSSレイアウトが組めるflexboxですが、IE8、IE9には対応しておらず、なかなか使いどころが難しいのですが、JQueryライブラリー「flexibility」を使えばIE8、IE9に対応させることができます！

「flexibility.js」をダウンロード

ダウンロードサイトから「Download ZIP」をクリックしてファイルをダウンロードしてださい。

「flexibility.js」を読み込む

ダウンロードしたファイルの中から「flexibility.js」を取り出してhtmlに読み込みます。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/flexibility.js"></script>

cssに指定

flexコンテナーのcssに「-js-display: flex;」を記述します。
これだけでIE8、IE9にも対応されます！

css

#flexContainer {
	-js-display: flex;
	display:flex;
}

※flexアイテムの配置指定などデフォルトで設定されているプロパティなどもcssにきちんと記述してあげないとIE8、IE9には対応されませんのでご注意ください。

※「order」による順番指定はIE8、IE9には対応されないようですので、そのあたりはIE8、IE9用に別途CSSの指定が必要になります。

参考サイト

• IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！