CSS Flexbox:"hypothetical cross size"的(算法/定义)是什么?



从规范来看,布局算法中的几乎所有内容都已定义,但似乎缺少此项。

第9.4.7段:https://www.w3.org/TR/css-flexbox-1/#algo-交叉项目-说明:

"通过执行使用过的主尺寸和可用空间的布局,处理auto作为合适的内容。">

然而,"执行布局"是未定义的——这是本段应该定义的,而它只是。。。递归地定义自己?

相比之下,上一节(针对Main Size(明确定义了"执行布局"的算法。但是Main和Cross的算法必须(几乎根据定义?(不同(至少略有不同!(。

我正在调试一些详细的Flexbox代码,当我找不到规范中明确的部分时,关于"跨尺寸布局的正确行为究竟是什么?"的问题很难回答。

最终,通过在浏览器中进行广泛的测试,我得出了这样的结论:

执行本规范中未定义的、任意的部分,无论您(实现者(认为这是"好的">

即此处没有规范。(官方表示:"无论浏览器做什么"都是正确的,但当然:它们所做的会随着时间的推移而变化,并且有自己的错误(

特别是:CSS规范中有一个很大的漏洞;元素的大小是多少";它显然是未经解释的,提供了各种元素"可能"的大小的"建议"。例如,PNG图像可能使用其原始像素宽度和高度(但你应该遵循视网膜大小、真实大小、点与像素等吗?SVG应该怎么办?这些都有几个可以说是正确的答案(。

我认为这就是为什么规范将此空格留空的原因。

最终,我发现了最好的结果,方法是为元素的内在大小实现一组合理的启发式方法,然后在这里使用它们以及可用的元信息、约束等。这与浏览器的做法最为吻合,并产生了良好的结果。

最新更新