如何准确计算弹性项目的假设主要尺寸 - CSS 规格问题

Question

我有固定宽度为 600 像素的弹性容器。它的 flex 项目有 flex-basis: 0 和 1px 边框和 16px 填充。根据此类项目的规范 flex 基本大小应为 0（根据规范 https://www.w3.org/TR/css-flexbox-1/#algo-main-item 中的信息，E 部分后的第一段）。此类物品的假设主要尺寸是多少？ 34 像素（边框 + 填充），0px 还是 -34px？通过阅读规范，我对此并不完全确定。

现在根据 Spec section 9.7 Resolving flexible lengths 计算弹性项目大小时。弹性系数将为 flex-grow。根据我的实验，我猜测假设的主要尺寸实际上是 34px（不是 0 或 -34px），因此该项目没有被冻结。但是最初的 free space 不会是 600px（因为 flex-base 大小是 0），而只会是 566px（我们从容器大小中提取了假设的主要大小，600px - 34px = 566px）。

这是正确的假设吗？

Answer 1

是的，正确。在规范中，您可以阅读：

The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).

所以这里的最小尺寸是 34px（填充和边框），并且该项目不会像您注意到的那样被冻结。如果您使用 flex-shrink:1（默认值）和 flex-grow:0

.box {
  border:1px solid;
  display:flex;
  width:600px;
}
.box div {
  padding:16px;
  border:1px solid red;
  background:blue;
  flex-shrink:1;
  flex-basis:0;
}

.box span {
  width:100%;
  flex-grow:1;
  flex-basis:100%;
  background:green;
}

<div class="box">
<div></div> <span></span>
</div>

如您所见，元素不会收缩，因为它已冻结。

if using the flex shrink factor: any item that has a flex base size smaller than its hypothetical main size

如何准确计算弹性项目的假设主要尺寸 - CSS 规格问题

How exactly is calculated hypothetical main size of flex item - CSS Spec question

css

specifications

flexbox