insdays

FlexBox は便利だけどプラウザによっては対応してない。無視したいけど…。

FlexBox を各プラウザに対応させる

  • 2018.11.27
  • CSS
CSS3 から登場した FlexBox。 とても、便利だけどプラウザによっては効かなかったりしてしまう、そんな時は

CSS

display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
とりあえず、これで現在の各プラウザでは見れるようになるはず

FlexBox を IE9 にも対応させたい

IE9 にも対応させてい場合は .js を使います。
flexibility.js をダウンロード

HTML

<!--[if lte IE 9]>
<script src="js/flexibility.js"></script>
<script>
$(function(){
flexibility(document.documentElement);
});
</script>
<![endif]-->
head 内に上記を記載。

CSS

display: -webkit-box;
display: -moz-box;
display: -webkit-flexbox;
display: -moz-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;

-js-display: flex;
-js-display: flex; を追加してあげます。
これで IE9 にも対応するはず。

Copyright 2018 insdays