为啥 flex-fill 在引导程序中没有创建相等的宽度？

Posted 2023-03-06

【中文标题】为啥 flex-fill 在引导程序中没有创建相等的宽度？

【英文标题】：Why is flex-fill not creating equal width in bootstrap?为什么 flex-fill 在引导程序中没有创建相等的宽度？

【发布时间】：2019-01-17 10:00:59

【问题描述】：

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

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

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

怎么可能？

【参考方案1】：

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

flex: 1 1 auto;

这相当于：

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

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

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

如果项目没有大小，那么内容的大小将用作 flex-basis。这就是为什么当我们只在父级上声明display: flex 来创建弹性项目时，所有项目都会移动到一行中，并且只占用显示其内容所需的空间。

所以flex-basis: auto 使框具有内容所需的宽度。只有然后，才会应用增长和收缩来填充容器的剩余大小。

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

这些列的宽度显然不一样，但是那些蓝色的盒子，也就是每个弹性项目中的空白，它们的宽度都是一样的。所以平衡的是剩余空间，不考虑内容。

当然，这很少是您想要做的。使用 flex box 最常见的做法是使所有项目具有相同的宽度。如果没有引导程序，您只需为此执行 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”。

【讨论】：

有一个小技巧可以避免定义自定义类flex-even。就是使用标准的bs4类media-body。它完全设置flex: 1。

^^ 非常有用的提示。但是如果你需要这个类来响应，你将不得不创建另一个实用程序类...

您可以通过 SASS 合并到引导实用程序文件中，例如 $utilities: map-merge( $utilities, ( "flex-even": ( responsive: true, property: flex, values: (even : 1) ) ) );繁荣现在你有 flex-even 和 flex-xs-even 等等等等。

【参考方案2】：

我带着同样的问题来到这里，想利用 Flexbox 而不仅仅是“经典”引导代码（我的想法有时是版本 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%;