如何使用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類名來保證一致性。

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> 

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> 

Answer 3

我為此創建了一個類，我檢查了Bootstrap文檔，但沒有發現它。

.flex-2 { flex-grow: 2 }

col-auto占用剩余空間，但如果您有多行，則空間不會平均分配。 這就是為什么flex-grow能夠解決問題的原因。