flex子项属性有3个：flex-grow,flex-shrink和flex-basis，分别对应增长、收缩和基准。
flex: <flex-grow> <flex-shrink> <flex-basis>
情况1：剩余空间分配(flex-grow)
场景:容器宽度 > 子元素基准宽度总和，存在剩余空间需要分配
此时，计算只需要按照grow比例直接分配，公平分配额外空间，即:剩余空间 * （grow值 / 总grow值）。则，最终Left宽度为：100px + 100px = 200px,Right宽度为：200px + 200px = 400px 。
情况2：溢出收缩(flex-shrink)
场景:容器宽度 < 子元素基准宽度总和，发生溢出需要收缩
这个时候的情况与情况1截然不同，不能直接按shrink比例直接收缩，需要同时考虑shrink和basis值，按加权比例分配，这样能够让大元素承担更多的尺寸收缩，因为在收缩时，大元素有更大的收缩空间，避免小元素被过度压缩
演示可以看见，如果按加权比例分配大小元素按其职做出相应的改变，而如果只是简单按比例分配，小元素在其中会被过度压缩，并不公平，会导致小元素失去可用性。在视觉上，按加权比例分配能保持布局的视觉协调性，让用户体验更好。
