为什么弹性填充无法在引导程序中创建相同的宽度？

Question

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

  

对一系列同级元素使用.flex-fill类，以在占据所有可用水平空间的同时将它们强制为相等的宽度。

我已经在三个兄弟姐妹上使用.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

引导程序的flex-fill很糟糕。它设置以下flex CSS属性：

flex: 1 1 auto;

这等效于：

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

增长和收缩值很好。这就是使盒子均匀共享可用空间的原因。但是auto flex-basis value不好：

  

flex-basis是根据该项目作为可用空间留下的空间来定义该项目的大小的方法。此属性的初始值为auto-在这种情况下，浏览器将查看项目是否具有尺寸。 […]

     

如果项目没有大小，则将内容的大小用作伸缩基础。这就是为什么当我们仅在父级上声明display: flex来创建弹性项目时，这些项目全部移入一行并且仅占用它们显示内容所需要的空间的原因。

因此flex-basis: auto使盒子具有内容所需要的宽度。而且只有然后，增长和收缩才能应用来填充容器的剩余大小。

如果您查看示例的输出，则可以看到以下内容：

这些列的宽度显然不相同，但是那些蓝色框（即每个flex项目中的空白）的宽度都相同。因此，没有考虑内容的情况下剩下的空间就是均匀的。

当然，这很少是您想要做的。伸缩框最常见的做法是使所有项目的宽度相同。如果没有引导程序，您将为此执行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在每个弹性项目中都使用相同的内容，因此您实际上并没有看到这种行为。还有an issue about this，最终可能会消除文档中的这种误解。

最重要的是：Bootstrap没有内置的flex: 1类（至少据我所知），因此最好自己创建一个。绝对是更有用的“弹性填充”。

Answer 2

我来到这里是一个同样的问题，想利用Flexbox而不仅仅是“经典的” Bootstrap代码（我的想法有时是版本3，而不是版本4）。

似乎Bootstrap 4的.col- *类在后台使用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%;
}