0
フレックスボックスを使用してグリッドレイアウトを作成しました。アイテムが複数の行に表示されたときにそれらのマージンが崩壊しました。これはMicrosoft EdgeとFirefoxでのみ発生します。ここでEdgeとFirefoxでのFlexboxグリッドの余白のぼけ
はCodepen上の私のコードは次のとおりです。https://codepen.io/stephenhlane/pen/BdvxzP
任意のアイデアこの問題を解決する方法?あなたのマージンのは、ビューポート、使用ビューポート単位に複数の関連であるかのように、パーセントを使用して
HTML
<div class="container">
<div class="item item-1">
<h2>Item one</h2>
</div>
<div class="item item-2">
<h2>Item two</h2>
</div>
<div class="item item-3">
<h2>Item three</h2>
</div>
<div class="item item-4">
<h2>Item four</h2>
</div>
<div class="item item-5">
<h2>Item five</h2>
</div>
<div class="item item-6">
<h2>Item six</h2>
</div>
</div>
CSS
body {
padding: 1.5%;
background-color: #333;
}
.container {
max-width: 964px;
margin: 0 auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-flex-flow: row wrap;
-moz-box-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.item {
position: relative;
width: 30.333%;
color: #fff;
background-color: #4286f4;
padding: 0 20px 40px;
margin: 1.5%;
box-sizing: border-box;
}