如何计算弹性项的假设主尺寸 - CSS规范问题

Question

我有一个宽度为600像素的flex容器。它的flex项目具有flex-basis: 0，并带有1像素边框和16像素填充。根据规范，这种项目的flex基础大小应该为0（根据规范信息中E节后的第一段）。这样的项目的假设主要尺寸是多少呢？34像素（边框+填充），0像素还是-34像素？从规范中的阅读来看，我不是完全确定。

现在，根据规范9.7节“解决可伸缩长度”计算flex项目大小。Flex因子将是flex-grow。在这里，根据我的实验，我猜测假想的主要尺寸实际上是34像素（而不是0或-34像素），因此该项目没有被冻结。但是初始自由空间将不会达到600px（因为flex-base大小为0），而只有566px（我们从容器大小中提取假设的主要尺寸，600px - 34px = 566px）。

这个假设正确吗？

- Tomáš Pustelník

Answer 1

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

“假设的主要尺寸是该项的弹性基准尺寸，根据其使用的最小和最大主要尺寸进行夹紧（并将内容框大小设置为零）。”

因此，这里的最小尺寸是34像素（填充和边框），并且该项目不会像您注意到的那样被冻结。如果您使用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>

正如您所看到的，该元素不会收缩，因为它被冻结了。

如果使用flex收缩因子：任何具有比其假设主要大小更小的flex基础大小的项

- Temani Afif