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

使用百分比的保证金不会在Flex项目上跨浏览器工作，因此如果您的保证金与视口更相关，请使用视口单元（vh或vw），否则，您可以将px与CSS calc()（即width: calc(33.333% - 20px)）结合使用，以匹配项目之间相等的装订线。

Updated codepen

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: