项目之间的CSS3 Flexbox间距

Question

对于Flexbox来说有些新手(虽然在CSS中经验丰富),在我看来,我读过的大多数教程都很方便地"掩盖"了灵活项目之间的间距.

例如,引用最多的教程之一就是CSS Tricks中的这个教程.

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

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

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

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

但是,当我自己尝试时,我当然得到了这个:

如果我使用空间,我会得到它.巨大的空间.

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

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

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

Answer 1

不 - 你没有遗漏任何东西.Flexbox非常适合订购元素并定义这些元素沿主轴或交叉轴的一般对齐方式,但不直接说明单个项目间距.如果您查看Flexbox文章中使用的此Codepen,您会注意到它们使用:

margin-top: 10px

定义元素间距.希望这可以帮助!