在 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)）匹配项目之间相等的 gutter。

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>

在 Edge 和 Firefox 中折叠 Flexbox 网格的边距

Collapsing margin on Flexbox grid in Edge and Firefox

css

firefox

flexbox

microsoft-edge