CSS3项目之间的Flexbox间距 [英] CSS3 Flexbox spacing between items
问题描述
对于Flexbox来说有点新奇（虽然经验丰富的CSS），在我看来，一个很容易掩盖的大多数教程我读过的是flex项目之间的间距。
Being somewhat new to Flexbox (although experienced in CSS), it seems to me that one thing conveniently "glossed over" by most tutorials I've read is the spacing between flex items.
For example, one of the most cited tutorials is this one at CSS Tricks.
这是非常好，已经有所帮助，这样的图表已经引起我：
It's very good and has been helpful, diagrams like this have thrown me off:
>
注意flex项目之间的空格。虽然在任何地方都没有提到，但在示例代码中，它似乎是获得空格的唯一方法是使用css边距。
Notice the spaces between the flex items. Although not mentioned anywhere, nor in the sample code, it would seem the only way to get the spaces is with css margins.
正确，或者我缺少一些重要的？
Correct, or am I missing something important here?
因为我需要创建的是这个，很像上面的center演示：
Because what i need to create is this, a lot like the "center" demo above:
但是，当我自己尝试时，我当然得到这样：
However, when I try it myself, I of course get this:
如果我使用空间，我得到这个。巨大的空间。
if I use space-around, I get this instead. Huge space.
看起来我需要添加margin-right到前两个框，以获得3个中心框，它们之间有一个小的差距。
Therefore it seems I need to add margin-right to the first 2 boxes to get 3 centered boxes with a small gap between them.
这只是一个不好的用例的Flexbox ？因为我认为创造我的3个盒子与Flexbox的使用简单的边缘和中心没有什么优势。
Is this simply a bad use case for Flexbox? Because I see little advantage creating my 3 boxes with Flexbox over using simple margins and centering.
我在这里缺少明显的东西？
Am I missing something obvious here?
推荐答案
不缺少任何东西。 Flexbox对于排列元素和定义沿着主轴或横轴的那些元素的大致对齐方式是非常好的，但是不直接说明单个项目间距。的如果你看看在Flexbox文章中使用的这个Codepen，你会注意到他们使用：
Nope - you're not missing anything. Flexbox is terrific for ordering elements and defining the general alignment of those elements along either the main or cross axes, but doesn't speak directly to individual item spacing. If you take a look at this Codepen used in the Flexbox article, you'll notice they use:
margin-top: 10px
元素间距。希望这有助于！
to define element spacing. Hope this helps!
这篇关于CSS3项目之间的Flexbox间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
