如何使用flex-grow？

Question

在文档和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类名只是为了保证一致性。

Answer 1

对简单的flex-grow: 1;使用.col。它在这里描述，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>

​

Answer 2

对于任何从谷歌搜索到这里的人(像我)。

从Bootstrap v4.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>

​

Answer 3

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

.flex-2 { flex-grow: 2 }

col-auto占用了剩余的空间，但是如果您有多行，那么空间将不会均匀分布。这就是flex-grow做到这一点的原因。