flexbox IE11で起きるバグやずれに立ち向かう

flexboxを使うとレイアウトが楽なんですが、たまにIE11でレイアウトの崩れが発生します。

その時の解決方法を備忘録としてまとめました。

IE11で子要素の画像やテキストの横幅が突き抜ける

IE11でflexboxのflex-direction: columnを使用した時、子要素の横幅が突き抜ける。

解決方法

親要素にwidth: 100%を指定

.flex{
    display: flex;
    width: 100%;
    flex-direction: column;
}

画像の下に大きな隙間ができる

IE11でflex-direction: columnを指定した子要素の中の画像の下に大きな隙間ができる。

解決方法

子要素にflex: 0 0 autoを指定で解決

<div class="flex">
    <figure class="image"><img src="" alt=""></figure>
</div>

.flex {
  display: flex;
  flex-direction: column;
}
.flex .image{
    flex: 0 0 auto; /*または min-height: 0%;*/
}

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選