有没有一种方法（公式）来计算用 flex-grow、flex-shrink 和 flex 基础描述的 flex 元素的绝对大小？

Posted 2023-03-06

【中文标题】有没有一种方法（公式）来计算用 flex-grow、flex-shrink 和 flex 基础描述的 flex 元素的绝对大小？

【英文标题】：Is there a way(formula) to calculate absolute size of flex elements described with flex-grow, flex-shrink and flex basis?

【发布时间】：2014-03-02 18:02:48

【问题描述】：

我做了一个小演示 http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-***.html

弹性容器中有 2 个弹性项目

弹性：1 2 1000 像素； 弹性：1 1 100 像素；

flex 容器的绝对宽度 - 500px;

最后，你可以看到，flex 元素的宽度是：

421 像素 79 像素

我的问题：有没有办法以数学方式描述计算出的尺寸（使用公式）？

【问题讨论】：

可能重复：***.com/questions/15927302/… 或 ***.com/questions/14224732/…

嗯，主题是相同的，从逻辑上讲，它以某种方式进行了描述，但我正在等待更多描述浏览器逻辑的数学公式，对于给定的值和最终大小

我链接的第一个似乎有一个数学公式。

这是关于 flex-grow 的，这对我来说很清楚。我对综合增长、收缩和基础更感兴趣

您根本没有阅读答案吗？增长和收缩的公式相同。第二个问题展示了基础是如何工作的。

【参考方案1】：

最接近公式的就是规范中的算法：

http://www.w3.org/TR/css3-flexbox/#resolve-flexible-lengths

我认为它不能轻易地用公式来描述。您可以用公式覆盖简单的情况，但是当元素具有min-width 或max-width 约束时，它会变得有点复杂（并且需要算法的多个循环）。

旁注：flexbox 规范可能很快会对flex-grow 和flex-shrink 的行为进行小幅更改，因此当它们的总和小于1 时，它们会被视为百分比。（例如flex-grow: 0.1永远不会给你超过 10% 的可用空间，即使你是唯一的孩子。）这里描述了这个提议：http://lists.w3.org/Archives/Public/www-style/2013Oct/0246.html