Как использовать flex-grow?

В документе и в выпусках 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 только для гарантии согласованности.

Ответ 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>

Ответ 2

Для тех, кто приходит сюда из поиска Google (как я).

Начиная с 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>

Ответ 3

Я создал класс для этого, я проверил документы Bootstrap и ничего не нашел об этом.

.flex-2 { flex-grow: 2 }

col-auto занимает оставшееся пространство, но если у вас более одной строки, пространство не будет распределяться одинаково. Вот почему flex-grow делает свое дело.