CSS3 项目之间的 Flexbox 间距

Question

对 Flexbox 有点陌生（尽管在 CSS 中有经验），在我看来，我读过的大多数教程 "glossed over" 方便的一件事是弹性项目之间的间距。

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

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

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

正确，还是我遗漏了一些重要信息？

因为我需要创建的是这个，很像上面的 "center" 演示：

然而，当我自己尝试时，我当然得到了这个：

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

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

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

我是不是漏掉了什么明显的东西？

Answer 1

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

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 规格最近 updated to apply gap properties to flexbox elements in addition to CSS grid elements. This feature is supported on the latest versions of all major browsers。使用 gap 属性，您可以使用 column-gap: 10px 之类的东西（或任何您想要的大小）来获得您想要的东西。

CSS3 项目之间的 Flexbox 间距

CSS3 Flexbox spacing between items

html

css

flexbox