给包装好的Flexbox项目垂直间距 [英] Giving wrapped flexbox items vertical spacing

问题描述

我最近是第一次与Flexbox一起玩，总的来说，这绝对很棒。但是我最近遇到了一个问题，我似乎无法给出包裹任何垂直间距的弹性物品。

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.

我尝试使用：

align-content: space-between;

但这似乎没有任何作用。从我完成的阅读中，只有当我的flex容器比其中包含的元素高时，这才似乎起作用（对吗？）如果是这样，那么我就不必为我的flex容器设置高度了，

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?

我能想到的唯一可行的方法是给其中的元素留底边，但这又一次

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.

希望我遗漏了一些显而易见的东西-这是一个指向Codepen的链接： http://codepen.io/lordchancellor/pen/pgMEPz

Hopefully I'm missing something fairly obvious - here's a link to a codepen: http://codepen.io/lordchancellor/pen/pgMEPz

另外，这是我的代码：

Also, here's my code:

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;
}

编辑-我将在此处添加更多详细信息不确定我是否将其放置得足够好。

EDIT - Just going to add a little more detail here, as I'm not sure I'm putting it across well enough.

在我的较大项目中，我有一些块级元素使用flexbox连续排列。但是，由于用户可能会减小屏幕宽度，因此需要具有一定的响应能力。在这一点上，我希望我的元素开始堆叠（因此自动换行）。但是，随着元素开始堆叠，它们全部都在垂直方向接触，我希望有间距。

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.

推荐答案

通过应用宽度进行换行，然后您可以像通常那样使用边距而无需设置高度。

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>

这篇关于给包装好的Flexbox项目垂直间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！