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>