Html 项目之间的 CSS3 Flexbox 间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30814878/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS3 Flexbox spacing between items
提问by Steve
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.
作为 Flexbox 的新手（虽然在 CSS 方面有经验），在我看来，我读过的大多数教程都方便地“掩盖”了一件事是 flex 项目之间的间距。
For example, one of the most cited tutorials is this one at CSS Tricks.
例如，引用最多的教程之一是 CSS Tricks 上的这个教程。
It's very good and has been helpful, diagrams like this have thrown me off:
它非常好并且很有帮助，像这样的图表让我失望：
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.
注意弹性项目之间的空格。虽然没有在任何地方提到，也没有在示例代码中提到，但似乎获得空格的唯一方法是使用 css 边距。
Correct, or am I missing something important here?
正确，还是我在这里遗漏了一些重要的东西？
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.
如果我使用 space-around，我会得到这个。巨大的空间。
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.
因此，似乎我需要为前 2 个框添加 margin-right 以获得 3 个居中的框，它们之间有一个小的间隙。
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.
这对 Flexbox 来说只是一个糟糕的用例吗？因为我认为使用 Flexbox 创建我的 3 个盒子比使用简单的边距和居中没有什么优势。
Am I missing something obvious here?
我在这里遗漏了一些明显的东西吗？
采纳答案by Ryan Miller
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:
不 - 你没有错过任何东西。Flexbox 非常适合排序元素和定义这些元素沿主轴或横轴的一般对齐方式，但不直接说明单个项目的间距。如果您查看 Flexbox 文章中使用的 Codepen，您会注意到它们使用：
margin-top: 10px
to define element spacing. Hope this helps!
定义元素间距。希望这可以帮助！
回答by Mohammed Moustafa
.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>回答by neurodynamic
The CSS spec has recently been updatedto apply gapproperties to flexbox elements in addition to CSS grid elements. Not all browsers support this yet (just Firefox at time of writing; the bug tracker page for adding it to Chrome is here), but this should soon be something you can do with something like column-gap: 10px(or whatever size you want).
CSS规范最近已经更新适用gap于除CSS网格元素属性Flexbox的元素。并非所有浏览器都支持此功能（在撰写本文时仅支持Firefox；将其添加到 Chrome 的错误跟踪器页面在这里），但这应该很快就会成为您可以使用类似column-gap: 10px（或您想要的任何大小）的东西。
