CSS 如何使用flex-grow？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42142753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use flex-grow?
提问by Eric Burel
In the doc and in the issues of Bootstrap v4 (here), I can't see any plan on supporting flex-grow, something with a syntax like this for example:
在文档和 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>
Here a sample of the layout I'd like to create:
这是我想创建的布局示例：
The export button is always on the right, and the navigation button takes all the space left and therefore looks clean.
导出按钮总是在右边，导航按钮占据了左边的所有空间，因此看起来很干净。
Is it possible to build such a layout already? Maybe it is not advised? Of course, there are workarounds using CSS, but I am looking for a clean solution, ideally using Bootstrap class names only to guarantee consistency.
是否已经可以构建这样的布局？也许不建议？当然，也有使用 CSS 的解决方法，但我正在寻找一个干净的解决方案，理想情况下使用 Bootstrap 类名只是为了保证一致性。
回答by Michael Coker
use .colfor a simple flex-grow: 1;. It's described here https://v4-alpha.getbootstrap.com/layout/grid/#variable-width-content
用.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>回答by Eric Burel
For anyone comming here from a google search (like me).
对于从谷歌搜索来到这里的任何人（像我一样）。
Since Bootstrap v 4.1 there are flex-growand flex-shrinkutilities, as the documentationsays you can use them like this:
从 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
Here is a little example
这是一个小例子
<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>回答by LTroya
I created a class for this, I checked the Bootstrap docs and found nothing about it.
我为此创建了一个类，我检查了 Bootstrap 文档，但一无所获。
.flex-2 { flex-grow: 2 }
col-autotakes the remaining space but if you have more than one row, so space won't be distributed equally. That's why flex-growdoes the trick.
col-auto占用剩余空间，但如果您有多于一行，则空间不会平均分配。这就是为什么flex-grow诀窍。
