大家肯定对flex布局都比较熟悉了，今天想记录的也是关于flex布局中关于flex-shrink的一个小的点。
考虑以下例子： 一个宽高500px的盒子container，有ABC三个子元素，三个元素宽分别是100px、200px、200px，高都是100px，假设flex-grow和flex-shrink设置的都是1
当container拉伸到590px时，即增加了90px，按照比例，每个盒子将会拉伸30px
上面的结果大家也都很清楚，但是到收缩的时候，事情就变得没那么简单了，相信很多人也跟我一样，也多多少少有了解，知道flex-shrink的值会影响到结果，很多人呢也跟我一样，知道收缩的值是加权以后计算的结果。当然不知道也没关系，这里直接举个简单的例子：
跟拉伸时类似，当container收缩到410px时，也就是减小了90px，跟拉伸时不同，
这里计算每个盒子具体该缩小多少时，要根据每个盒子的尺寸以及flex-shrink设置的值加权计算，
比如上述例子具体的计算就是：
A: 100px / (100px * 1 + 200px * 1 + 200px * 1) * 90px = 16px
BC计算过程类似
最终结果就是A缩小16px，BC缩小32px
其实呢，这个计算差异当初在学习css3的时候也注意到了，但当时没多想，今天偶然复习到这个点，突然就在想，为什么要这样设计，就跟flex-grow设计的一样不好吗，还方便记，然后能去查了一下，可能认真看的文章也比较少，看了半天基本都是介绍用法以及计算规则的文章，最后也没看到能让我解开疑惑的文章。研究了半天，功夫不负有心人，最终算是想通了，至少能够说服我自己了，哈哈！
假如flex-shrink像我（们）想象中那样设计，其实像上述例子中，缩小16px跟30px，其实影响好像真的不是很大，平常很难注意到这个尺寸差异（说不定很多朋友之前都没注意到shrink计算的区别😂）。但当情况特殊一点的时候，问题就很严重了，比如还是上述结构，假如ABC设置的分别是50px、200px、200px，当container收缩到300px时，也就是比三个子元素应占宽度450px小150px，那么150px将由ABC收缩承担，每个收缩50px，此时A宽度变成了0。这才是问题所在，这是不符合现实场景的，我们不会希望布局过程中出现这种现象，因此对于缩放采用复合的加权分配，这样始终能够保证子元素不会出现像上面这种缩为0的情形。
最后，这些设计布局的人真牛逼，啥都能考虑到。Rp！
