IE11でのflex


コンテンツを上下中央に配置する場面がよくあります。

flexを使用すれば簡単に実現できるのですが、IEでのブラウザで見たときとほかのブラウザでの動きに注意しなければなりません。

クロームなどのブラウザでは上下中央揃えになりますが、
IEでは右中央に表示されてしまいます。

flexをかけた直下の子要素にmargin autohを指定していると、IEでは中央揃えにならないため
解決策としては、

mzrgin:autoが指定されている要素をdivで囲うことで解決ができます。
flexは便利ですが、IEなどのブラウザなどの見え方に気を付けないと、時間がかかってしまうので、理解して使用していきたいですね