IE11でのflex

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

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

   

      
コンテンツ
   


.content{
        display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
.content-inner {
  max-width: 300px;
  margin: 0 auto;
}

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

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

  

     

      
コンテンツ
     
  

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