css - 有没有一种方法(公式)可以计算以 flex-grow、flex-shrink 和 flex 为基础描述的 flex 元素的绝对大小？

Question

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

flex 容器中有2个 flex 元素

1. flex :1 2 1000px；
2. flex :1 1 100 像素；

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

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

1. 421px
2. 79px

我的问题:有没有一种方法可以用数学方法描述计算出的尺寸(使用公式)？

Answer 1

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

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

我不认为它可以很容易地用公式来描述。您可以使用公式涵盖简单情况，但当元素具有 min-width 或 max 时，它会变得有点复杂(并且需要算法的多个循环) -宽度约束。

旁注:flexbox 规范可能很快会对 flex-grow 和 flex-shrink 行为做一个小改动，这样它们就更像是一个百分比当它们的总和小于 1 时。(例如 flex-grow: 0.1 永远不会给你超过 10% 的可用空间，即使你是唯一的 child 。)该提议被描述这里:http://lists.w3.org/Archives/Public/www-style/2013Oct/0246.html