Html CSS3项目之间的Flexbox间距

对于Flexbox来说有点陌生（虽然有CSS方面的经验），在我看来，我读过的大多数教程都很方便地“掩盖”了一件事，那就是flex项目之间的间距

例如，引用最多的教程之一是

这很好，也很有帮助，像这样的图表让我感到不舒服：

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

对，还是我遗漏了一些重要的东西

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

然而，当我亲自尝试时，我当然会得到以下结果：

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

因此，我似乎需要在前两个框的右边添加边距，以获得三个居中的框，它们之间有一个小间隙

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

---

我是不是遗漏了一些明显的东西？

不是-你没有遗漏任何东西。Flexbox非常适合对元素进行排序，并定义这些元素沿主轴或横轴的总体对齐方式，但并不直接涉及单个项目的间距，您会注意到他们使用：

margin-top: 10px

定义元素间距的步骤。希望这有帮助

.rope{
宽度：393px；
保证金：0自动；
显示器：flex；
证明内容：中心；
背景颜色：海蓝宝石；
}
.盒子{
高度：100px；
宽度：100px；
利润率：15px；
背景：红色；
}

CSS规范最近将

gap

属性应用于flexbox元素以及CSS网格元素。使用

gap

属性，您可以使用

列间距：10px

（或您想要的任何大小）之类的内容来获得所需的内容。

谢谢Ryan，我的问题是，即使使用

对齐内容：间距

，项目的左右两侧也总是有空格。在您的回答中，我注意到我在以前样式的CSS项中留下了一个遗忘的

边距：auto

。在我删除它之后，“弹性间距”工作正常（侧面不再有不规则的间距）。您还会注意到，该示例没有使用边距顶部来创建flexbox项目之间的间距。如果认为使用

网格间距

，我们也应该有

弹性间距

，这有缺陷吗？