如何使用flex-grow？

Question

在 Bootstrap v4 的文档和问题 (这里) 中，我看不到任何支持 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类名以确保一致性。

- Eric Burel

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

- Michael Coker

---

这个很有效，应该被接受为答案。它也可以使用 row>col 代替 d-flex>col。http://www.codeply.com/go/rcJBwXRjSN - Carol Skelly

它支持垂直布局吗？例如，当顶部菜单应始终出现且内容应占据所有剩余的垂直空间时，是否可行？ - Eric Burel

@EricBurel在非.col列上使用断点网格类，并将所有内容放入.row和.container中。这些都在我提供的链接中有参考。已更新我的答案。 - Michael Coker

这个解决方案不够原子化。它添加的不仅仅是 flex-grow，还有一些其他的 padding。我认为更合理的做法是找到一个类似 Bootstrap 的实用库，提供这样的原子实用类。 - adi518

Answer 2

如果有人像我一样从谷歌搜索过来。

自 Bootstrap v 4.1 起，有 flex-grow 和 flex-shrink 工具类，如文档所述，您可以按以下方式使用它们：

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

- user4914734

---

但是它们缺少能够添加不同数字到 grow 参数的实用工具（比如 flex-grow-sm-2/3/4/5 等）。 - Jørgen Skår Fischer

Answer 3

我为此创建了一个类，查看了 Bootstrap 文档但未找到相关内容。

.flex-2 { flex-grow: 2 }

col-auto占据剩余空间，但如果你有多行，那么空间不会被平均分配。这就是为什么flex-grow起作用的原因。

- LTroya