【HTML,CSS】IEでflex-boxが効かないとき
昨今、IEをサポートしてないことが多いですが、
（プラスワンもIEについては非サポートです）
稀にIEを使用するケースがあります。
最近も久しぶりにIEを触る機会があり、その時に「display:flex」が効かなくてハマってあせったことがあったので、その時のことをメモ代わりに。
次のようなコードで、
<div class="logo_content"> <h3>■■■■■■■■■■■■■■■</h3> <div class="logo_dark"> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> <div class="rs_news"> <p>○○○○○○○</p> ・・・ <p>○○○○○○○</p> </div> </div> </div>
クラス.rs_news を横並びに配置したいので logo_dark に display:flex を設定したが…
.logo_dark {
display : flex;
flex-flow : row wrap;
justify-content : space-around;
align-items : flex-start;
}
chromeなどのモダンブラウザでは、想定どおり横並びで綺麗に配置されたが、
IEでは、うまく表示されない。
調べてみると、親要素である .logo_content の display が block でないと、
flex が、うまく効かないみたいなので、次のようにstyleを設定したら、
IEでも、うまくいった。
.logo_content{
display : block;
}
.logo_dark {
display : flex;
flex-flow : row wrap;
justify-content : space-around;
align-items : flex-start;
}
どうやらIEのバグらしいが、なかなか解決方法が分からず、あせった！
早く、完全にIEに対応しなくて良い日が訪れて欲しい！（笑）