【问题标题】：Spacing between flexbox items弹性盒项目之间的间距
【发布时间】：2014-06-19 10:48:51
【问题描述】：

这就是我想要的：

The closest I've got. 对 flexbox 项应用边距，然后从第一个和最后一个子项中删除一半。

问题是:first-child 并不总是视觉上的第一个，因为我可能会更改布局顺序 (example)。

有没有办法在应用边距时考虑视觉顺序？

【问题讨论】：

CSS 网格布局解决方案：stackoverflow.com/a/48755146/3597276

【解决方案1】：

CSS 规范最近是 updated 将 gap 属性应用于除了 CSS 网格元素之外的 flexbox 元素。 This feature is supported on the latest versions of all major browsers。使用gap 属性，您只需使用gap: 10px（或您想要的任何大小）就可以得到您想要的。

【讨论】：

Safari 错误已解决，并且支持随 14.1 一起提供。最后！ :o)
感谢更新的答案。

【解决方案2】：

为间距创建一个虚拟的 div / View 是不是很糟糕？

<Item style={{flex:1}} />
<View style={{width: 10}}
<Item style={{flex:1}} />

【讨论】：

这并不违反规则，但使用标记来定义样式是一种不好的做法。有时你需要这样做。但是有一些 CSS 方法可以实现这一点并将内容与样式分开。

【解决方案3】：

试图坚持你的问题：

有没有办法在应用时考虑视觉顺序边距？

我会说不，就像你不能根据背景颜色的值来设置元素的样式一样。为此，您可以编写自定义类来设置弹性顺序，然后基于它们进行子类化。

请查看这个有趣的线程，我在其中发布了关于间距的解决方案： Better way to set distance between flexbox items

【讨论】：

【解决方案4】：

使用 Flex 的另一个优点是您可以指定用于剩余空间的策略：

.container {
    justify-content: space-between;
}

【讨论】：

【解决方案5】：

编辑 - 我不建议使用这种方法，它很老套。我会把它留在这里供后代使用。

我做了什么来解决这个问题，因为我不确定每个弹性空间中有多少元素。例如，我正在构建一个 Drupal 主题并有四个并排对齐的区域，但我希望占据整个宽度，即使其中只有三个区域有内容。

为每个区域设置 10 像素的内边距
设置每个区域的背景颜色以匹配主题背景颜色 - 在我的例子中是白色
在每个区域内创建了一个 div（以创建它们之间的边距错觉。

HTML 看起来像这样：

<div class="flexy">
    <div class="region">
       <div class="region-inner">
       </div>
    </div>
</div>

CSS 看起来像这样：

.flexy {
    display: flex;
    flex-wrap: wrap;
}

.flexy .region {
    box-sizing: border-box;
    flex-grow: 1;
    flex-basis: 0;
    padding: 10px;
}

这给我留下了这样的布局（忽略丑陋，颜色仅用于演示）：

还添加了一些其他类，例如“halves”、“thirds”和“quarters”，以帮助在更小和/或更大的屏幕上做出响应。

【讨论】：

但您的内容不符合容器边界
请参阅我的答案顶部的注释。

【解决方案6】：

虽然Rejoy answer 工作得很好，但它还没有准备好响应，因为行被锁定了。

flex-flow 是你的新朋友。然而，flex 并非没有错误。我们从各种网格框架中知道的负边距技巧确实有效，除非你在 IE 上，因为它使用 content-box 作为 box-size，所以元素被过早包装。但是有一个简单的解决方法。

工作示例：https://jsfiddle.net/ys7w1786/

.flex {
  display: flex;  
  flex-direction: row; /* let the content flow to the next row */
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -4px -4px; /* grid trick, has to match box margin */
}

由于 IE，这些框带有 flex-basis: auto。但我们可以简单地使用width 代替：

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 8px); 
}
.s1-4{
  width: calc(25% - 8px);
}

【讨论】：

【解决方案7】：

可以使用带负边距的包装 div 来实现所需的布局

.flex-wrapper{
    margin: -20px;
}

工作代码http://jsfiddle.net/8cju5jpd/

【讨论】：

当使用弹性流而不是手动定义行时，这不能按预期工作

【解决方案8】：

您可以尝试为所有框设置相同的边距，然后在容器上还原：

所以替换这个：

.flex > * { margin: 0 10px; }    
.flex > :first-child { margin-left: 0; }
.flex > :last-child { margin-right: 0; }

.flex.vertical > :first-child { margin-top: 0; }
.flex.vertical > :last-child { margin-bottom: 0; }

有了这个：

.flex.vertical { margin: -20px 0 0 -20px; }
.flex > * { margin: 0 0 0 20px; }
.flex.vertical > * { margin: 20px 0 0 0; }

【讨论】：

..但是最后一个元素的右侧有一个边距：jsfiddle.net/kWkmx
更新了我的答案。在最后一个建议中，边距仅添加到顶部和左侧。然后这些在容器上以相应的负边距恢复。
这不是“作弊”吗？问题是针对一个 flexbox，而不是创建多个。 flexbox 应该负责在新的列或行本身上安排项目。在动态网站上，您必须先计算有多少进入一行或一列，然后才能使用这种方法呈现 HTML。我不满意。
但是如何避免溢出容器的水平滚动条：自动？
@jbyrd 我不确定为什么这会导致水平滚动条。内箱中是否有图像或固定宽度的内容，以防止它们收缩或弯曲。你有例子吗？

【解决方案9】：

这是获得相同东西的另一种方法。

.vertical > div{ margin-bottom: 10px; }
.vertical > div:last-child{ margin-bottom: 0; }
.box + .box{ margin-left: 10px; }

【讨论】：

你能解释一下这对@agrm 的回答的好处吗？使用div:not(:first-child)，而不是div + div，它们是在
元素内还是在其他任何地方都没有关系。