项目之间的 CSS3 Flexbox 间距答案

【问题标题】：CSS3 Flexbox spacing between items项目之间的 CSS3 Flexbox 间距
【发布时间】：2015-08-29 03:51:26
【问题描述】：

对 Flexbox 有点陌生（尽管在 CSS 方面经验丰富），在我看来，我读过的大多数教程都方便地“掩盖”了一件事情，那就是 flex 项之间的间距。

例如，被引用最多的教程之一是this one at CSS Tricks。

它非常好而且很有帮助，像这样的图表让我感到厌烦：

注意弹性项目之间的空间。尽管没有在任何地方提及，也没有在示例代码中提及，但似乎获得空格的唯一方法是使用 css 边距。

正确，还是我在这里遗漏了一些重要的东西？

因为我需要创建的是这个，很像上面的“中心”演示：

但是，当我自己尝试时，我当然会得到这个：

如果我使用空格，我会得到这个。巨大的空间。

因此，我似乎需要在前 2 个框上添加 margin-right 以获得 3 个居中的框，它们之间的间隙很小。

这对 Flexbox 来说只是一个糟糕的用例吗？因为我觉得用 Flexbox 创建我的 3 个盒子与使用简单的边距和居中相比没有什么优势。

我在这里遗漏了什么明显的东西吗？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

.rope {
  width: 393px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  background-color: aquamarine;
}
.box {
  height: 100px;
  width: 100px;
  margin: 15px;
  background: red;
}

<div class='container'>
  <div class='rope'>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

【讨论】：

【解决方案3】：

不——你没有错过任何东西。 Flexbox 非常适合对元素进行排序和定义这些元素沿主轴或交叉轴的一般对齐方式，但不能直接说明单个项目的间距。 If you take a look at this Codepen used in the Flexbox article，你会注意到他们使用：

margin-top: 10px

定义元素间距。希望这会有所帮助！

【讨论】：

感谢 Ryan，我的问题是即使使用 justify-content: space-between，这些项目的左侧和右侧总是有空格。通过您的回答，我注意到我在以前样式的项目 CSS 中留下了一个被遗忘的margin: auto。删除后，“弹性间距”正常工作（两侧不再有不规则空间）。
您还会注意到，该示例没有使用 margin-top 来创建 flexbox 项目之间的间距。
认为有了grid-gap，我们也应该有flex-gap，这是有缺陷的吗？