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

怎么可能？

flex-fill不幸的是,Bootstrap 是一个非常糟糕的课程.它设置以下flexCSS属性:

flex: 1 1 auto;

这相当于:

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

增长和收缩价值都很好.这使得盒子均匀地共享可用空间.然而,auto弹性基础值并不好:

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

如果项目没有大小,则将内容的大小用作弹性基础.这就是为什么当我们display: flex在父节点上声明创建弹性项目时,这些项目都会移动到一行中,并且只占用显示其内容所需的空间.

因此flex-basis: auto使盒子具有内容所需的宽度.只有这样,才能应用增长和收缩来填充容器的剩余尺寸.

如果您查看示例中的输出,您可以看到:

列显然不是相同的宽度,但是那些蓝色框,即每个弹性项目中的空白,它们都具有相同的宽度.所以平衡的是剩下的空间,而不考虑内容.

当然,这很少是你想要做的.柔性盒最常见的做法是使所有物品具有相同的宽度.如果没有bootstrap,你就会这样做flex: 1,这是简写flex: 1 1 0;

.flex-even {
  flex: 1;
}

  
Item
  
Another
  
Last item