Edge和Firefox中Flexbox网格上的折叠边界

Question

我使用flexbox创建了网格布局，当这些项目出现在多行上时，它们之间的边距折叠。这只发生在Microsoft Edge和Firefox上。

这是我在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; 
} 

Answer 1

保证金使用百分比不起作用在柔性物品跨浏览器的，所以如果你的保证金的更多的与视口，使用视台（vh或vw），否则您可以将px与CSS calc()（即width: calc(33.333% - 20px)）组合以匹配项目之间的平等沟槽。

Updated codepen

body { 
 
    padding: 1.5%; 
 
    background-color: #333; 
 
} 
 

 
.container { 
 
    //background-color: black; 
 
    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: 97%; 
 
    color: #fff; 
 
    background-color: #4286f4; 
 
    padding: 0 20px 40px; 
 
    margin: 1.5vh; 
 
    box-sizing: border-box; 
 
} 
 

 
@media only screen and (min-width:420px){ 
 
    .item { 
 
    width: 47%; 
 
    } 
 
} 
 

 
@media only screen and (min-width:768px){ 
 
    .item { 
 
    width: 30.333%; 
 
    } 
 
} 
 

 
a { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 20px; 
 
}

<div class="container"> 
 
    <div class="item item-1"> 
 
    <h2>Item one</h2> 
 
    <p>Pellentesque convallis turpis nec enim consequat, vitae pellentesque purus tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis blandit elit vel lacus gravida, nec imperdiet ligula ornare.</p> 
 
    <a href="#">Read more</a> 
 
    </div> 
 
    <div class="item item-2"> 
 
    <h2>Item two</h2> 
 
    <p>Pellentesque convallis turpis nec enim consequat, vitae pellentesque purus tempus.</p> 
 
    <a href="#">Read more</a> 
 
    </div> 
 
    <div class="item item-3"> 
 
    <h2>Item three</h2> 
 
    <p>Pellentesque convallis turpis nec enim consequat, vitae pellentesque purus tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p> 
 
    <a href="#">Read more</a> 
 
    </div> 
 
    <div class="item item-4"> 
 
    <h2>Item four</h2> 
 
    <p>Pellentesque convallis turpis nec enim consequat.</p> 
 
    <a href="#">Read more</a> 
 
    </div> 
 
    <div class="item item-5"> 
 
    <h2>Item five</h2> 
 
    <p>Pellentesque convallis turpis nec enim consequat.</p> 
 
    <a href="#">Read more</a> 
 
    </div> 
 
    <div class="item item-6"> 
 
    <h2>Item six</h2> 
 
    <p>Pellentesque convallis turpis nec enim consequat.</p> 
 
    <a href="#">Read more</a> 
 
    </div> 
 
</div>