前端开发flex属性的计算原理

flex属性是flex-grow、flex-shrink和flex-basis的简写形式。
前面已经已经仔细分析过了flex-grow和flex-shrink，这两个flex布局中的难点。

既然flex属性，是简写，本文以一个测试案例再来简单回顾一下。
只有主轴上有剩余空间存在时，flex-grow才起作用。
类似的，只有主轴上溢出了，flex-shrink才起作用。
怎么衡量是否有剩余空间存在，还是溢出呢？
看flex-basis。

举两个例子：
假如一个容器中只有两个子元素或者项目。
项目1的flex:2 3 30%
项目2的flex:3 2 60%
首先判断谁会起作用。
30%+60%=90%，因此还有10%的存在，因此属于有剩余空间，因此flex-grow起作用。
既然不够就扩展，按权重来扩展。
那么项目1要扩展的比例是10%的2/(2+3)，即4%，因此项目1变成34%。
同理，项目2要扩展的比例是10%的3/(2+3)，即6%，因此项目2变成了66%。
效果请看后面的测试案例。

我们再举个空间溢出的例子。
项目1的flex:2 3 60%
项目2的flex:3 2 110%
因60%+110%=170%，溢出了70%，因此flex-shrink将会起作用，势必每个项目都要按权重减小。
项目1减少70%的多少呢？
减少了：60%3 /(60%3+110%2)=180/400=45%，
70%的45%，即31.5%。
因此项目1变成了60%-31.5%=28.5%。
同理项目2减少的比例是
70%(110%*2/400%)=38.5%。
因此项目2变成了110%-38.5%=71.5%。

flex-grow和flex-shrink这二者前面文章做了详细说明和类比，可以看看。
测试案例如下：
html 代码