Flexboxは様々なレイアウトを、従来の方法よりずっと簡単に実装できる優れたプロパティです。
最近ではfloatではなくFlexboxを使ってレイアウトを組んでいる人も多いのではないでしょうか。
そんな便利なFlexboxですが、IE8や9に対応していないため、古いブラウザーをサポートした案件では使用することができません。
flexboxを使用すれば簡単なレイアウトでも諦めるしかない、なんて場面もあるかもしれません。
ですが、旧式のブラウザーでもFlexboxを使用する方法があります。
上記からダウンロードし、flexibility.jsを読み込ませるだけです。
1 2 3 4 5 6 7 8 |
■JS <script src="js/flexibility.js"></script> ■CSS .flex-box { display: flex; -js-display: flex; } |
CSSには適応させたいクラスに対して、ベンダープレフィックスのようにプロパティの前に-js-と追記するだけでOKです。
古いブラウザーに対応させるためのスクリプトは大変便利です。
後は、動作確認と読み込み速度など気を付けて使用していきたいですね。
コメント