弹性项目的假设主要尺寸到底是如何计算的 - CSS Spec问题

Question

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

现在，根据规范第 9.7 节“解析灵活长度”计算弹性项目尺寸。弹性系数将为flex-grow。根据我的实验，我猜测假设的主要尺寸实际上是 34px（不是 0 或 -34px），因此该项目不会被冻结。但初始可用空间不会是 600px（因为 flex-base 大小为 0），而只有 566px（我们从容器大小中提取假设的主大小，600px - 34px = 566px）。

这是正确的假设吗？

Answer 1

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

\n

\n

假设的主尺寸是 item\xe2\x80\x99s根据其使用的最小和最大主尺寸（并将内容框尺寸归零）固定的 Flex 基本尺寸。

\n

\n

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

\n

\r\n

\r\n

.box {\n  border:1px solid;\n  display:flex;\n  width:600px;\n}\n.box div {\n  padding:16px;\n  border:1px solid red;\n  background:blue;\n  flex-shrink:1;\n  flex-basis:0;\n}\n\n.box span {\n  width:100%;\n  flex-grow:1;\n  flex-basis:100%;\n  background:green;\n}

\r\n

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

\r\n

\r\n

\r\n

\n

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

\n

\n

如果使用弹性收缩因子：任何弹性基础尺寸小于其假设主要尺寸的项目

\n

\n