Flexbox网格最后一行项

Question

我还在尝试使用flexbox，但是这种情况我无法解决。

我有这个网格

<div class="wrapper">
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

使用以下CSS：

.wrapper{
   width:100%; 
   oveflow:hidden; 
   margin: 0; 
   padding:0;
}
.container {
  width:100%;
  display: flex;
  flex: 1;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0;
}
.container .item {
  display: block;
  margin: 0 0 30px;
  width: 29.666%;
}

但是当我使用它时，最后一行中的项目使用与前一行中的项目不同的“空格”进行渲染。

看看这张照片。这就是我得到的：

试图解决这个问题，我唯一能找到的就是将项目的横向边距设置为自动，就像这样

.container .item {
  display: block;
  margin: 0 auto 30px;
  width: 29.666%;
}

但现在，我在物品和容器边框之间有横向边距，如下所示：

为什么会这样？

除了容器div上有负侧边距外，有没有办法解决这个问题？

Answer 1

我看不到默认设置。

我确实修改了你的css代码，所以可以看到东西并且仅从第二行设置边距：

.wrapper {
}
.container {
  width: 100%;
  background: #3197D3;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0;
}
.container .item {
  display: block;
  width: 29.666%;
  min-height: 100px;
  background: #FFFF4D;
}
.item:nth-child(3) ~.item {
  margin-top: 30px;
}
/* demo purpose*/

.container:before {
  content:'.'attr(class);
  width:100%;/* will span whole line */
  padding:0.15em;
  font-size:3em;
  text-align:center;
  color:white;
  background:rgba(255,255,255,0.5);
  }
.container .item {
  display: flex;
}
.item:before {
  content: attr(class);
  margin: auto;
  color:#3197D3;
  font-size:2em;
}

<div class="wrapper">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 2

我没有看到你做的相同结果，但你的边缘看起来有点奇怪。我把它剥离了下来：

＆＃13;

＆＃13;

.wrapper {
  background: blue; 
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
}

.item {
  background: yellow;
  height: 30px;
  width: 29.666%;
}

.item:not(:nth-last-child(-n+3)) {
  margin-bottom: 30px;
}

＆＃13;

<div class="wrapper">
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;