flex-directionを指定した時に IE11で表示がおかしくなる
CSS3から新たに追加された Flexible Boxはプロパティが豊富で可変レイアウトに柔軟に対応できるのでレスポンシブデザインでの制作には欠かせないものになっています。しかし IEでデバッグをしていた時に flex-directionに関連するバグのようなものに遭遇しました。
IEだけ画像に余分な隙間ができる
IE 11では flex-directionに columnや column-reverseを指定した子要素に画像があると、その子要素に画像の元サイズの高さ分のスペースができてしまいます。サンプル画像内にある写真の下のグレーの部分がそれにあたります。
解決方法
解決方法はシンプルで min-heightを利用します。IE 11以外のブラウザでの表示に影響はありません。以下がサンプルのコードです。
HTML body
<div class="flex"> <p class="flex-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <div class="flex-inner"><img src="画像のURL" alt="画像の説明"></div> </div>
テキストが上で画像が下の一列の表示でテキストと画像の位置を CSSで入れ替えることを想定します。
CSS
.flex {
display: flex;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -ms-flexbox;
display: -o-flex;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;
}
div.flex-inner {
min-height: 0%;
}
div.flex-inner img {
height: auto;
width: 100%;
}
p.flex-inner {
margin-top: 30px;
}
display: flexを指定している要素の子要素に min-height: 0%を指定すると画像の下の隙間がなくなりました。
対応しているブラウザはこちらから確認できます。
