さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】IE8,IE9にもFlexboxを対応させる – flexibility.js –

Pocket
LINEで送る

簡単に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の指定が必要になります。

参考サイト

カテゴリー:HP制作, JQuery

コメントを残す

コメント内容