twitter-bootstrap - 为什么 flex-fill 不在 Bootstrap 中创建相等的宽度？

Question

根据 Bootstrap 4.1 documentation关于 .flex-fill 类

Use the .flex-fill class on a series of sibling elements to force them into equal widths while taking up all available horizontal space.

我已经在 3 个 sibling 上使用 .flex-fill 做了一个例子，但他们并没有被迫等宽。

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

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

这怎么可能？

Answer 1

不幸的是，Bootstrap 的 flex-fill 是一个非常糟糕的类。它设置以下 flex CSS 属性:

flex: 1 1 auto;

这相当于:

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

增长和收缩值很好。这就是让盒子平均共享可用空间的原因。 auto flex-basis value然而并不好:

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 item中的空白，它们的宽度都是一样的。因此，在不考虑内容的情况下，平衡的是剩余空间。

当然，这很少是您想要做的。 flex 盒子最常见的做法是使所有元素具有相同的宽度。如果没有 Bootstrap ，您只需为此执行 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 的目的。更糟糕的是，the example they are showing在每个 flex 元素中使用相同的内容，因此您实际上看到这种行为。还有 an issue about this ，这可能最终会消除文档中的这种误解。

但底线是:Bootstrap 没有内置的 flex: 1 类(至少据我所知)，因此您最好自己创建一个。它绝对是更有用的“flex-fill”。