Html 给包裹的 flexbox 项目垂直间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35578404/
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
Giving wrapped flexbox items vertical spacing
提问by lordchancellor
I've recently been playing with Flexbox for the first time and, in general, it's absolutely amazing. I've encountered an issue recently however, where I cannot seem to give flex items that are wrapping any vertical spacing.
我最近第一次玩 Flexbox，总的来说，它绝对是惊人的。然而，我最近遇到了一个问题，我似乎无法提供包裹任何垂直间距的 flex 项目。
I've tried using:
我试过使用：
align-content: space-between;
but this doesn't seem to do anything. From the reading I've done, this would only seem to work if my flex container is taller than the elements contained within (is this right?) If so, then would I not have to set a height for my flex-container, which would seem to defeat the purpose of using flexbox?
但这似乎没有任何作用。根据我所做的阅读，这似乎只有在我的 flex 容器比其中包含的元素高时才有效（这是对的吗？）如果是这样，那么我是否不必为我的 flex 容器设置高度，这似乎违背了使用 flexbox 的目的？
The only way I can think of to make this work would be to give bottom margin to the elements within, but again this seems to defeat the purpose.
我能想到的唯一方法是给里面的元素留底边距，但这似乎又违背了目的。
Hopefully I'm missing something fairly obvious - here's a link to a codepen: http://codepen.io/lordchancellor/pen/pgMEPz
希望我遗漏了一些相当明显的东西 - 这是一个代码笔的链接：http://codepen.io/lordchancellor/pen/pgMEPz
Also, here's my code:
另外，这是我的代码：
HTML:
HTML：
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>
CSS:
CSS：
.flexContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: center;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
EDIT - Just going to add a little more detail here, as I'm not sure I'm putting it across well enough.
编辑 - 只是要在这里添加更多细节，因为我不确定我是否把它讲得足够好。
In my larger project, I have some block level elements that are arranged in a row using flexbox. However, there needs to be some responsiveness as the user may reduce the screen width. At this point, I want my elements to begin to stack (hence the wrap). However, as the elements begin to stack, they are all touching vertically, where I want there to be spacing.
在我更大的项目中，我有一些块级元素使用 flexbox 排列成一行。但是，由于用户可能会减小屏幕宽度，因此需要有一些响应能力。在这一点上，我希望我的元素开始堆叠（因此包装）。然而，随着元素开始堆叠，它们都垂直接触，我希望在那里有间距。
It's beginning to look like top and bottom margins may be the only way to resolve this - however I was wondering if there was a flexbox-centric way to achieve this.
开始看起来顶部和底部边距可能是解决这个问题的唯一方法 - 但是我想知道是否有一种以 flexbox 为中心的方法来实现这一点。
采纳答案by Paulie_D
If you force wrapping by applying a width you can then use margins as you normally would without setting a height.
如果您通过应用宽度强制换行，则可以像往常一样使用边距而无需设置高度。
.flexContainer {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
background: pink;
width: 150px;
}
.flexContainer > * {
margin: 1em 0;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>回答by JRulle
I had a similar issue and I used the following hackto solve the issue.
我有一个类似的问题，我使用以下技巧来解决这个问题。
/* add a negative top-margin to the flex container */
.flexContainer {
/* ... your existing flex container styles here */
margin: -10px 0 0 0;
}
/* add a corresponding positive top margin to all flex items (all direct children of the flex container) */
.flexContainer > * {
margin-top: 10px;
}
For the top row of flex items the negative and positive margins cancel out, for the subsequent rows it adds the margin between the rows (in this case 10pxbetween rows).
对于 flex 项目的顶行，负边距和正边距抵消，对于后续行，它添加行之间的边距（在这种情况下10px，行之间）。
It's less than elegant but it gets the job done.
它不太优雅，但可以完成工作。
回答by tenor528
It's because you don't have a height on your flex content for it to calculate the space-between so at the moment, the flex container is as small as possible. Add a height and it should work.
这是因为你的 flex 内容没有高度来计算空间，所以目前，flex 容器尽可能小。添加一个高度，它应该可以工作。
回答by Zohar
Another hacky solution is to give the item a bottom border:
另一个 hacky 解决方案是给项目一个底部边框：
border-bottom: 10px solid transparent;
