Flex 布局 flex-shrink 理解误区

flex-shrink 计算：再深入一点点

关于 flex-shrink，flex-grow 属性，是如何计算的，前人已经有了很多总结，本篇是在本人学习 flex 过程中遇到问题后，再进行思考，对 flex-shrink 属性的进一步拓展。

额，等等，好像有哪里不对？？？和显示的数值不太一样。

第一个盒子，明明是 175px，第二列排布 3 个盒子的时候，每个盒子应该占有的宽度也是 175px。可是：

计算结果为 128.708px。

我们来重新计算下

175px / 3 = 58.333px

第一个盒子占据了175px，那么剩下的 58.333px 的宽度需要由第二个和第三个盒子均分，即 58.333px / 2 = 29.167px。

这样子，3 个盒子加起来是 175px 了。所以，计算是正确的。

可是，为什么计算结果 128.708px 不等于 58.333px 呢？

那是因为 flex-shrink 还有很多影响因素，比如兄弟盒子的宽度，父盒子的宽度，我们把宽度限制去掉：

宽度变大了，怎么计算呢？

宽度除以盒子数为 175px / 3 = 58.333px。

第二个和第三个盒子均分 58.333px / 2 = 29.167px。

现在盒子宽度为 58.333px + 29.167px = 87.5px。

盒子没有充满整行。

这回，我们强制第一个盒子宽度为 58.333px * 2 = 116.666px。

盒子宽度为 116.666px + 29.167px = 145.833px。

盒子充满整行。

现在应该知道，58.333px 是最小宽度了。

如果想让盒子充满整行，就必须强制把第一个盒子的宽度变大。

第一个盒子撑开之后，其他盒子就自然而然变小，保持总体宽度不变。

flex-shrink 的本质，其实就是宽度最小化。

如果宽度足够，那么就不会产生任何作用。

flex-grow 同理，宽度最大化。

flex：等于就是把盒子拉伸至最大宽度，再缩小至最小宽度，均分至各个盒子。

最后给出一张思维导图，总结了 flex-shrink 的一些性质，希望对你有所帮助。