项目

Question

对于Flexbox来说有些新手（尽管在CSS方面经验丰富），在我看来，有一件事很方便＆＃34;掩盖了＆＃34;我读过的大多数教程都是弹性项之间的间距。

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

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

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

正确，还是我错过了重要的事情？

因为我需要创造的是这个，很像'＆＃34;中心＆＃34;以上演示：

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

如果我使用空间，我会得到它。巨大的空间。

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

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

我错过了一些明显的东西吗？

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可以将gap属性应用于CSS网格元素之外的flexbox元素。并非所有的浏览器都支持此功能（just Firefox at time of writing；将其添加到Chrome的错误跟踪器页面为here），但是不久之后，您就可以使用column-gap: 10px之类的东西了（或类似的东西）您想要的尺寸）。