我最近第一次玩 Flexbox，总的来说，这绝对是惊人的。然而，我最近遇到了一个问题，我似乎无法提供包裹任何垂直间距的弹性项目。
我试过使用：
align-content: space-between;
但这似乎无济于事。从我所做的阅读来看，这似乎只有在我的 flex 容器比其中包含的元素高时才有效（对吗？）如果是这样，那么我不必为我的 flex-container 设置高度，哪个似乎违背了使用 flexbox 的目的？
我能想到的唯一方法是为内部元素提供底部边距，但这似乎再次违背了目的。
希望我遗漏了一些相当明显的东西 - 这是一个 codepen 的链接：http://codepen.io/lordchancellor/pen/pgMEPz
另外，这是我的代码：
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：
.flexContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: center;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
编辑 - 只是在这里添加更多细节，因为我不确定我是否足够好。
在我较大的项目中，我有一些使用 flexbox 排列成一行的块级元素。但是，需要有一些响应能力，因为用户可能会减小屏幕宽度。此时，我希望我的元素开始堆叠（因此是换行）。然而，当元素开始堆叠时，它们都垂直接触，我希望在那里有间距。
它开始看起来像顶部和底部边距可能是解决这个问题的唯一方法 - 但是我想知道是否有以 flexbox 为中心的方法来实现这一点。
我有一个类似的问题，我使用以下 hack 来解决这个问题。
/* 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;
}
对于弹性项目的顶行，负边距和正边距抵消，对于后续行，它添加行之间的边距（在本例中为行之间的 10px）。
它不够优雅，但可以完成工作。
如果通过应用宽度来强制换行，则可以像往常一样使用边距，而无需设置高度。
.flexContainer { 显示：弹性；对齐项目：居中；弹性包装：换行；证明内容：中心；背景：粉红色；宽度：150px； } .flexContainer > * { 边距：1em 0; } .flexContainer .flexLabel { 弹性基础：150px;弹性收缩：0； }
flex-wrap: wrap; 覆盖
column-gap 和 row-gap 是用来设置 flexbox 显示的垂直和水平间距的。 （我不知道它们在 2016 年的支持情况如何。）如果它们相同，您也可以使用 gap 一次设置它们。
row-gap 可以解决你的问题
.flexbox {
display: flex;
column-gap: 10px;
row-gap: 10px
}
这是因为您的 flex 内容上没有高度来计算它之间的空间，所以目前，flex 容器尽可能小。添加一个高度，它应该可以工作。
flex-direction: column？没有把握。
另一个 hacky 解决方案是给项目一个底部边框：
border-bottom: 10px solid transparent;
