给包裹的flexbox项目垂直间距

Question

我最近一直在玩Flexbox,一般来说,这绝对是惊人的.我最近遇到了一个问题,我似乎无法提供包装任何垂直间距的弹性项目.

我尝试过使用:

align-content: space-between;

但这似乎没有做任何事情.从我已经完成的阅读中,如果我的弹性容器高于其中包含的元素(这是正确的吗？),这似乎只会起作用.如果是这样,那么我就不必为我的flex容器设置高度,似乎打败了使用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;
}

对于顶行的flex项,负边距和正边距将抵消,对于后续行,它会在行之间添加边距(在本例中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

这是因为你的flex内容没有高度来计算它之间的空间,所以此刻,flex容器尽可能小.添加一个高度它应该工作.