项目之间的 CSS3 Flexbox 间距

Question

作为 Flexbox 的新手（虽然在 CSS 方面有经验），在我看来，我读过的大多数教程都方便地“掩盖”了一件事是 flex 项目之间的间距。

例如，引用最多的教程之一是 CSS Tricks 上的这个教程。

它非常好并且很有帮助，像这样的图表让我失望：

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

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

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

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

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

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

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

我在这里遗漏了一些明显的东西吗？

Answer 1

不 - 你没有错过任何东西。 Flexbox 非常适合对元素进行排序并定义这些元素沿主轴或横轴的一般对齐方式，但不会直接说明单个项目的间距。 如果您查看 Flexbox 文章中使用的 Codepen ，您会注意到它们使用：

margin-top: 10px

定义元素间距。 希望这可以帮助！

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

Answer 3

CSS 规范最近已更新，除了 CSS 网格元素之外，还对 flexbox 元素应用了gap属性。 所有主要浏览器的最新版本都支持此功能。 使用gap属性，您可以使用column-gap: 10px （或任何您想要的大小）之类的东西来获得您想要的东西。