flex-grow与 flex-shrink计算规则

一、flex-grow的计算规则

首先给定一个弹性容器（宽800px）和几个弹性元素（宽100px）

分别设定前三个弹性元素的所占放大比例flex-grow为1,2,3

那么它们的计算规则如下：

1. 首先计算flex-grow份数，即 1+2+3 = 6，共计6份
2. 第一个li的宽度 = 自身原有宽度(100px) + 剩余空间(300px)*所占比例(1/6) = 100px + 50px = 150px;
3. 第二三个li的计算规则与上述一致，所以分别为200px,250px
4. 后两个li因为没有设定flex-grow属性，因为分别保持原来的宽度 100px;

二、flex-shrink的计算规则

先来看超出范围时弹性元素的表现效果：需将flex-shrink设为0,可以看出多出了100px，为了看的明显一点，把弹性容器的padding-top设为10px。