html - 元素之间的 CSS3 Flexbox 间距

Question

作为 Flexbox 的新手(尽管在 CSS 方面经验丰富)，在我看来，我读过的大多数教程很容易“掩盖”的一件事是 flex 元素之间的间距。

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

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

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

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

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

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

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

因此，我似乎需要在前 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

定义元素间距。希望这对您有所帮助!