Почему flex-fill не создает равную ширину в бутстрапе?

flex-fill Bootstrap, к сожалению, очень плохой класс. Он устанавливает следующие свойства CSS flex:

flex: 1 1 auto;

Это эквивалентно:

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

Значения роста и сжатия в порядке. Это то, что заставляет коробки равномерно распределять доступное пространство. Однако Значение гибкости auto не подходит:

The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. […]

If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

Таким образом, flex-basis: auto обеспечивает ширину ящиков, необходимую для содержимого. И только потом, увеличение и уменьшение применяется для заполнения оставшегося размера контейнера.

Если вы посмотрите на результат своего примера, то увидите следующее:

Столбцы, очевидно, имеют разную ширину, но эти синие прямоугольники, которые представляют собой пробелы в каждом гибком элементе, имеют одинаковую ширину. Таким образом, выравнивается оставшееся пространство без учета содержимого.

Конечно, это редко бывает тем, чем вы хотите заниматься. Чаще всего с гибким боксом делают все элементы одинаковой ширины. Без начальной загрузки вы бы просто сделали для этого flex: 1, что является сокращением для flex: 1 1 0;.

.flex-even {
  flex: 1;
}

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel = "stylesheet"/>

<div class = "d-flex">
  <div class = "flex-even">Item</div>
  <div class = "flex-even">Another</div>
  <div class = "flex-even">Last item</div>
</div>

К сожалению, это не то, чем авторы Bootstrap сделали свой flex-fill. И что еще хуже, пример, который они показывают использует одно и то же содержимое во всех гибких элементах, поэтому вы на самом деле не используете видеть такого поведения. Также существует проблема по этому поводу, который может в конечном итоге устранить это недоразумение в документации.

Итог: Bootstrap не имеет встроенного класса flex: 1 (по крайней мере, насколько мне известно), поэтому вам лучше создать его самостоятельно. Это определенно более полезная «гибкая заливка».

Я пришел сюда с тем же вопросом, желая использовать Flexbox, а не просто «классический» код Bootstrap (иногда я думаю о версии 3, а не 4).

Кажется, что классы .col- * в Bootstrap 4 используют для этого под капотом flexbox! Они используют сокращение для flex-grow, flex-shrink и flex-basis для достижения 50% ширины. Однако делает требует использования .row в качестве оболочки для каждого класса .col-*.

(Этот код взят из инструментов разработчика браузера)

.col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}