Flexbox 网格最后一行项目之间的边距错误答案

【问题标题】：Flexbox grid last row wrong margins between itemsFlexbox 网格最后一行项目之间的边距错误
【发布时间】：2016-03-04 00:05:48
【问题描述】：

我仍在尝试使用 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 上设置负横向边距之外，还有其他方法可以解决这个问题吗？

【问题讨论】：

负边距不是解决方案。也许您可以添加一个类的第一个元素并使该位置；相对；左：20px;
无法复制。这将违反规范。
我在不了解如何修复的情况下进行了修复。刚刚在样式表中删除了很多脏旧的 css。我认为这只是一些冲突导致了这种奇怪的行为。我会删除这个问题，它非常没用。怎么办？

标签： css flexbox grid-layout

【解决方案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>

【讨论】：

【解决方案2】：

我没有看到默认值。

我确实修改了你给定的 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>

【讨论】：