IE11とflex

まだまだIE11に対応したコーディングも必要だと思います。（かなり、状況は変わってきましたが）

IE11は他のモダンブラウザと比べるとCSSの対応状況が悪いです。古いブラウザなのでしょうがないのですが...

Flexboxなら、IE11でも使えるのかなっと思ったら、思い通りにならない事もありまして...

---

IE11でflexのショートハンドにcalcは使えない

→対応方法：全部書きましょう（煩わしいですが...)

//3列に並べる、右にマージン20pxつける。

.flex_item{

flex:0 1 calc((100% - 40px) / 3);

margin-right:20px;

}

.flex_item:nth-of-type(3n){

margin-right:0

}

こんな感じでcalcを使いたい時があるのですが、IE11では、ショートハンド指定でcalcを使えないです。

//こんな感じで書く

.flex_item{

 flex-grow:0;

 flex-shrink: 1;

 flex-basis:calc((100% - 40px) / 3);

 }

実はこれだけでは、IE11でまだ崩れる可能性があります。なぜなら、

flex-basisにbox-sizingがデフォルトでは効かないからです。

→対応方法：max-widthも併記する。

max-widthも一緒に指定しましょう。

.flex_item{

 flex-grow:0;

 flex-shrink: 1;

 max-width:calc((100% - 40px) / 3);

 flex-basis:calc((100% - 40px) / 3);

 }

まだまだ、色々あるらしいので、IE11でflexの挙動がおかしいと感じた時は調べてみる事をお勧めします。

宣伝です。

お仕事受け付けてますので、よろしくお願いいたします。