flex-shrink算法学习 flex-shrink算法学习

flex-shrink是flex体系中比较难理解的一个属性，今天来看一下。
文档 http://www.css88.com/book/css/properties/flex/flex-shrink.htm
flex-shrink只在元素需要瘦身的前提下才生效，否则等于白写。
题1，常规算法求a、b、c、d四元素的宽度。

.father { display: flex; width: 800px; height: 300px; } .a { flex-shrink: 1; width: 50px; background: #ff00ff; } .b { width: 300px; background: #ff0000; } .c { flex-shrink: 2; width: 50px; background: #0000ff; } .d { width: 600px; background: #00ff00; }

解：
b和d元素没有声明flex-shrink，所以默认为flex-shrink: 1。
目前子元素总宽度是1000px，父容器是800px，有200px需要消化掉。
表面上，从flex-shrink的值来看，a占1份，b占1份，c占2份，d占1份，一共5份。
这里说一种错误理解：如果你以为，一份是200px/5=40px，所以各个元素减肥掉1份40px，或者减肥掉2份40px就可以了，那就错了。
应该怎么算？怎么理解flex-shrink的值？
首先明确flex-shrink的值的含义，最通俗的解释是，flex-shrink就是减肥的强度，而不是斤数。也就是说，别的元素一天要跑1小时，C元素要跑2个小时，别的元素一天要做100个俯卧撑，C元素要做200个俯卧撑。但绝对不是说，别的元素要减40斤，C必须减80斤。道理很简单，减肥也要考虑原本的体重，对不对？有的元素是成年人，减40斤不是问题，而C只是一个小孩子，如果让C减80斤，很可能减成了负值了。
所以记住一句话，flex-shrink就是减肥的强度，而不是斤数。
正确算法应该是：
求减肥总权重：50 * 1 + 300 * 1 + 50 * 2 + 600 * 1 = 1050，因为C要贡献2份强度，所以乘以2。
A应该瘦身：200 * (50 / 1050) = 9.523px，瘦身之后是50 - 9.523 = 40.476px
B应该瘦身：200 * (300 / 1050) = 57.143px，瘦身之后是300 - 57.143 = 242.857px
C应该瘦身：200 * (50 * 2 / 1050) = 19.048px，瘦身之后是50 - 19.048 = 30.952px
D应该瘦身：200 * (600 / 1050) = 114.285px，瘦身之后是600 - 114.285 = 485.714px
题2，当某元素width为百分比值如果某个元素的宽度为百分比，会是怎样？

.father { display: flex; width: 800px; height: 300px; } .a { flex-shrink: 1; width: 50%; background: #ff00ff; } .b { width: 300px; background: #ff0000; } .c { flex-shrink: 2; width: 50px; background: #0000ff; } .d { width: 100px; background: #ff8800; }

怎么算？其实很简单，先把宽度百分比乘以父元素宽度，算出px值，之后的计算跟题1一致。为了验证，我还是计算一遍吧。
解：
A元素的width是400px。
然后我们计算需要减肥多少：
400 + 300 + 50 + 100 - 800 = 50px
减肥总权重为：
400 * 1 + 300 * 1 + 50 * 2 + 100 * 1 = 900
A应该瘦身：50 * (400 / 900) = 22.22px，瘦身之后是400 - 22.22 = 377.77px
B应该瘦身：50 * (300 / 900) = 16.66px，瘦身之后是300 - 16.66 = 283.33px
C应该瘦身：50 * (50 * 2 / 900) = 5.55px，瘦身之后是50 - 5.55 = 44.44px
D应该瘦身：50 * (100 / 900) = 5.55px，瘦身之后是100 - 5.55 = 94.44px
题3，当某元素flex-shrink为0 某元素flex-shrink为0意味着它不参与减肥，所以整个减肥算法都要排除掉该元素，也就是说把该元素视为不变形的刚体就行了。
验算从略，你可以试试给题2的b元素添加flex-shrink: 0。
题4，当flex-shrink值为小数 flex-shrink值为小数跟为整数是一样的道理，算法完全一样。
给题2的b元素设上flex-shrink: 0.5测试一下，只计算b元素。
解：
需要减肥的量还是50px。
总权重是：400 * 1 + 300 * 0.5 + 50 * 2 + 100 * 1 = 750
b需要减肥50 * (300 * 0.5 / 750) = 10px，减肥之后是300 - 10 = 290px。
实测一下，正确。
题5，全部元素不设flex-shrink 【flex-shrink算法学习】全部不设flex-shrink，则视为全部元素的flex-shrink为1，这样的话，计算方式最简单，全部元素都等比压缩。