给予包裹的弹性盒项目垂直间距

Question

我最近第一次使用 Flexbox，总的来说，它绝对是令人惊奇的。然而，我最近遇到了一个问题，我似乎无法提供包裹任何垂直间距的弹性项目。

我尝试过使用：

align-content: space-between;

但这似乎没有任何作用。从我读过的内容来看，只有当我的弹性容器比其中包含的元素高时，这似乎才有效（这是对的吗？）如果是这样，那么我就不必为我的弹性容器设置高度，这似乎违背了使用 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 为中心的方法来实现这一点。

Answer 1

row-gap 可以解决你的问题

.flexbox {
    display: flex;
    column-gap: 10px;
    row-gap: 10px
}

Answer 2

我遇到了类似的问题，我使用以下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

）。

它不太优雅，但它可以完成工作。

Answer 3

如果您通过应用宽度来强制换行，则可以像平常一样使用边距，而无需设置高度。

.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>

Answer 4

这是因为你的弹性内容没有高度来计算之间的空间，所以目前，弹性容器尽可能小。 添加高度就可以了。

Answer 5

另一个 hacky 解决方案是给项目一个底部边框：

border-bottom: 10px solid transparent;

Answer 6

最近我自己也遇到了这个问题。上面建议的解决方案确实很好。想添加另一个我认为更简单、更容易理解的解决方案。

.flexContainer{
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;
    gap:0.5rem;
}

align-content: flex-start

将使所有项目粘在一起，

gap:0.5rem

将在项目之间添加相等的水平和垂直空间。