给包装的 flexbox 项目提供垂直间距

Posted 2023-03-05

【中文标题】给包装的 flexbox 项目提供垂直间距

【英文标题】：Giving wrapped flexbox items vertical spacing

【发布时间】：2016-06-05 08:11:08

【问题描述】：

我最近第一次使用 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 为中心的方法来实现这一点。

【参考方案1】：

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

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

【讨论】：

为什么负边距被认为是 hack？

在这种情况下，因为这不是边距修复弹性盒间隙的理想用途，并且边距与另一个对象中的另一个边距一起使用以影响另一个对象的外观。因此，这使得它不那么优雅，因为它很容易被认为是意大利面条逻辑的不良做法（更改对象 A 以修复对象 B + 非正统地使用边距来修复 flexbox）。我认为这个解决方案虽然很好，除了它的 hacky 方面，这不是 OP 的责任，而是 CSS 和浏览器本身没有一个干净的方法来解决这个问题。

对于所有解决方案都是 hack 的问题，我认为这是最简单的解决方案。

显然这是这样做的，至少根据 Mozilla 的说法：) developer.mozilla.org/en-US/docs/Web/CSS/…

【参考方案2】：

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

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

【讨论】：

no wrap 似乎是一个错字，因为它在两行之后被flex-wrap: wrap;覆盖

是的，你完全正确，nowrap 是一个愚蠢的错字，因为我从我的大型项目中提取了这段代码 sn-p！

问题已被编辑，但事实仍然是项目没有包装，因为父项足够宽以容纳它们。

它会在已知高度上分隔元素，但如果你不设置一个，怎么可能呢？

@lordchancellor 你可能已经知道这一点，但对于那些不知道的人来说，column-gap 和row-gap 是用来设置 flexbox 显示的垂直和水平间距的。 （我不知道它们在 2016 年的支持情况如何。）如果它们相同，您也可以使用 gap 一次设置。

【参考方案3】：

这是因为您的 flex 内容上没有高度来计算间距，所以目前，flex 容器尽可能小。添加一个高度，它应该可以工作。

【讨论】：

谢谢 - 我希望避免在元素上设置高度，但也许这不是完成这项工作的正确思维方式！

也许您正在寻找的是flex-direction: column？不确定。

聚会有点晚了，但对于那些搜索...除此之外，您可以为每个元素设置下边距

【参考方案4】：

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

border-bottom: 10px solid transparent;

【讨论】：

适用于高度为 100% 的情况

为什么不使用透明边框呢？让这变得不那么老套了。

使用边框而不是边距有什么好处？