This
通俗来讲就是当flex items的大小超过了flex container时， 各个flex item的压缩比例， 请看下面的示例:
复制代码代码如下:
#container div {
height: 200px;
width: 60px;
}
#test1 {
background-color: blue;
flex-shrink: 1;
}
#test2 {
background-color: yellow;
flex-shrink: 0.5;
}
与的宽度总和是120px， 超过了的宽度100px， 超过的大小为20px, 那么container为了装下两个子div，两个子div的宽度就必须减少20px，那么每个子div的宽度减少多少呢？ 这个时候就需要flex-shrink属性来分配了，每个子div的实际显示宽度计算方法公式为:
实际值 = 计划值 - 总差值 * flex-shrink/(flex-shrink和)
根据上面的公式我们可以计算出与的实际宽度值分别为:
复制代码代码如下:
: width = 60 - 20 * 1 / (1 + 0.5) = 47px
: width = 60 - 20 * 0.5 / (1 + 0.5) = 53px
根据以上结果可知flex-shrink值越大，flex item的实际结果就会越小
