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

我没有看到与您相同的结果，但您的边距看起来有点奇怪。我将其简化为:

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

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