【WEB】【備忘録】flex-direction:column IE10/11で高さが認識されない

def_web

現在構築中の趣味サイトではIE9も切り捨ててFlexible Box Layoutを取り入れたのですが、タイトルの通りIEが立ちはだかってきました。


HTML

こんな簡素なHTMLを用意。
<div class="wrap">
    <div class="flex-box">
    	<p>テキスト省略</p>
    </div>
    <div class="flex-box">
    	<p>テキスト省略</p>
    </div>
    <div class="flex-box">
    	<p>テキスト省略</p>
    </div>
</div>

CSS

関係ない指定は省略してます。
.wrap{
	display: flex;
}
.flex-box{
	flex: 1;
}
.flex-box~.flex-box{
	margin-left: 30px;
}
@media screen and (max-width: 480px){
	.wrap{
		flex-direction: column;
	}
	.flex-box~.flex-box{
		margin-top: 30px;
		margin-left: 0;
	}
}

とりあえず、並べてみる

2015-09-18-01

期待通りの表示です。
問題ないですね!

w480px以下にしてみる

2015-09-18-02

まずはchrome。縦方向も問題ないですね。
また、margin-leftを入れてたので、それを0にして上方向にmarginを取るようにしてます。


そして、


2015-09-18-03


ねぇ今どんな気持ち?


バグらしい…

いろいろWEBを探った結果、どこかで「IE10とIE11のバグです」みたいな記述を見つけました。
(すみません、ページを保存し忘れました…)
某技術ブログの紹介記事でもガタ崩れしてたので、きっと仕方ないのでしょう。


というわけで、私がやったこと。

@media screen and (max-width: 480px){
	.wrap{
		display: block;
	}
	/* 以下略 */
}


480px以下ではflexを解除しました。
縦方向に並べたいだけなので、普通のブロック要素で特に問題ありませんね!

コメントを投稿する

メールアドレスが公開されることはありません。