IE8,9にFlexboxを対応させる

Flexboxは様々なレイアウトを、従来の方法よりずっと簡単に実装できる優れたプロパティです。
最近ではfloatではなくFlexboxを使ってレイアウトを組んでいる人も多いのではないでしょうか。

そんな便利なFlexboxですが、IE8や9に対応していないため、古いブラウザーをサポートした案件では使用することができません。
flexboxを使用すれば簡単なレイアウトでも諦めるしかない、なんて場面もあるかもしれません。

ですが、旧式のブラウザーでもFlexboxを使用する方法があります。

flexibility.js

上記からダウンロードし、flexibility.jsを読み込ませるだけです。

■JS


■CSS
.flex-box {
  display: flex;
    -js-display: flex;
}

CSSには適応させたいクラスに対して、ベンダープレフィックスのようにプロパティの前に-js-と追記するだけでOKです。

古いブラウザーに対応させるためのスクリプトは大変便利です。
後は、動作確認と読み込み速度など気を付けて使用していきたいですね。