flexibility.jsとカラム落ち

flexibility.jsでieのflexbox対応しようと思ったらカラム落ちしたので、対応方法をメモ。

[css]
.container {
display: flex;
flex-wrap: wrap;
}
.inner {
width: 32%;
margin: 0 2% 0 0;
}
.inner:nth-of-type( 3n ) {
margin-right: 0;
}
[/css]
[html]
<div class=”container”>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
</div>
<!–[if lte IE 9]>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js”></script>
<script>
window.addEventListener( “load”, function() {
flexibility(document.documentElement);
}, false );
</script>
<![endif]–>
[/html]

3カラムの一覧。とても単純。
これを fexibility.js を読み込んだ ie で表示したところ、2カラム表示となった。なぜ?

space-betweenを使用

[css]
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.inner {
width: 32%;
}
.inner:nth-child(3n+2):last-child {
margin-right: 34%;
}
[/css]

marginを space-between に任せたらうまくいった。

ちなみにspace-between + after擬似要素だとうまくいかない

3カラムだと以下のように最後にafter擬似要素を加えて最後の行のコンテンツが両端に行くのを防ぐやり方があるけど、flexibility.jsだとafter擬似要素が無視される。

[css]
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container::after {
display: block;
content: ”;
margin-right: 34%;
}
.inner {
width: 32%;
}
[/css]

ieはいつまでたっても困らせてくるなぁ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください