先回顾一下flex-grow。假设有一个div包含三个子div1、div2、div3，每个子的宽度都是200px。对于flex-grow的剩余空间分配比例的计算，相信大家已经对flex布局非常熟悉了。这里有一个简单的计算公式：假设div1、div2、div3的flex-grow分别设置为1、2、3。现在假设外层div的宽度是800px，那么剩下的800px-3*200px=200px三个子div怎么分配呢？三个div分配的额外空间如下：div1:1/(1+2+3)200px=1/6200pxdiv2:2/(1+2+3)200px=2/6200pxdiv3:3/(1+2+3)200px=3/6200px很重要，flex-shink是怎么计算的？flex-shink属性主要是当外层div宽度不够时，收缩sub-div的一定空间来弥补宽度不足。比如现在三个sub-div的宽度都是600px，但是我把外面的div的宽度设置为500px，那么对于600-500px不够显示的sub-div应该怎么缩小100px呢？这时候flex-shrink就派上用场了，那么怎么计算呢？有人说这个属性类似于flex-grow，计算方法也差不多（其实是有区别的）。但是怎么计算，很多人都说不清楚，包括一个MDN，W3CShcool也没有给出具体的公式。另外，我发现很多点赞多的文章都给出了错误的计算公式。这就是我要写这篇文章的原因。好了，说说收缩空间的计算方法吧！先贴出例子的代码：html部分：
