如何使用 flex-grow？答案

【问题标题】：How to use flex-grow?如何使用 flex-grow？
【发布时间】：2017-06-27 19:40:48
【问题描述】：

在文档和 Bootstrap v4 (here) 的问题中，我看不到任何支持 flex-grow 的计划，例如：

<div class="d-flex">
      <div  class="flex-grow">
        I use all the space left
      </div>
      <div>
        I am a small text on the right
      </div>
</div>

这里是我要创建的布局示例：

导出按钮总是在右边，导航按钮占据了左边的所有空间，因此看起来很干净。

是否已经可以构建这样的布局？也许不建议这样做？当然，也有使用 CSS 的解决方法，但我正在寻找一个干净的解决方案，理想情况下使用 Bootstrap 类名称只是为了保证一致性。

【问题讨论】：

标签： css layout flexbox bootstrap-4

【解决方案1】：

将.col 用作简单的flex-grow: 1;。这里有描述https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      I use all the space left
    </div>
    <div class="col-sm col-sm-auto">
      I am a small text on the right
    </div>
  </div>
</div>

【讨论】：

这很好用，应该是公认的答案。它也适用于 row>col 而不是 d-flex>col codeply.com/go/rcJBwXRjSN
它是否适用于垂直布局？例如，什么时候顶部菜单应该总是出现，并且内容应该占据所有的垂直空间？
@EricBurel 在非.col 列上使用断点网格类，并将所有内容放在.row 和.container 中。这一切都在我提供的链接中引用。更新了我的答案。
这个解决方案不够原子。它增加的不仅仅是flex-grow，对初学者的补充。我会说找到一个具有 Bootstrap 精神的实用程序库更有意义，它确实提供了这样一个原子实用程序类。

【解决方案2】：

我为此创建了一个类，我检查了 Bootstrap 文档并没有发现任何相关内容。

.flex-2 { flex-grow: 2 }

col-auto 占用剩余空间，但如果您有超过一排，则空间不会平均分配。这就是flex-grow 的作用所在。

【讨论】：

【解决方案3】：

对于任何从谷歌搜索来到这里的人（比如我）。

自 Bootstrap v 4.1 以来，有 flex-grow 和 flex-shrink 实用程序，正如 documentation 所说，您可以像这样使用它们：

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1

这是一个小例子

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="d-flex flex-row">
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
  <div class="d-flex flex-grow-0 text-white justify-content-center bg-success">
    Grow 0
  </div>
  <div class="d-flex flex-grow-1 text-white justify-content-center bg-danger">
    Grow 1
  </div>
</div>

【讨论】：

但他们缺少用于向增长参数添加不同数字的实用程序（如 flex-grow-sm-2/3/4/5 等）