flex-shrink属性是用来约束flex布局时，子项的收缩规则。我们来屡屡通过shrink属性计算flex元素最终大小的过程。
假设页面标签和样式：
<!-- html -->
<section class="container">
<div class="left"></div>
<div class="right"></div>
</section>
<!-- less -->
.container {
display: flex;
width: 600px;
height: 300px;
.left {
flex: 1 4 500px;
background: peachpuff; }
.right {
flex: 2 1 400px;
background: yellowgreen;
}
}页面元素container的宽度为600px，而它的元素left和right分别500px与400px，这将导致left和right被压缩：
尽管left的basis是500px大于right但是left的shrink大于right，所以left实际宽度小于right。
怎么计算得出的实际宽度呢？
首先我们要明确shrink是分配超出部分宽度，在前面的例子中就是container-(left+right)的超出部分300px,。但并不是把这300px按照子项的shrink值的和5来等分的，而是需要给一个权值，这个权值就是子项各自的宽度。
由此我们知道可以得出：
left的超出空间的配额为：500*4/(500*4+400*1)
left的实际需要减去的空间为：300*配额
left的实际宽度为：500-需要减去的空间
最终宽度：250px
总结
1、shrink分配的是超出部分的宽度
2、计算过程中重点就在计算配额的时候需要算上权值
