CSS3 flex-shrink属性用法详解
flex-grow控制flex container有多余空间的时候怎么分配，默认值为0，即所有的flex items都不分配。
flex-shrink1则控制flex container空间不足以包含flex items时，flex items怎样缩小所占空间，来防止溢出container。其默认值为1，flex items们根据自身的flex-basis值做相应调整。
看一个示例：
<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代码如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy5634')">复制代码</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy5634><div class='example-Grid'><div class='example-first'>汇成一道道光的流河</div>
<div class='example-last'>我曾在天上见过地的繁华</div>
</div>
<style>
.example-Grid{
display: flex;
border: 2px solid black;
width: 250px;
}
.example-first{
background: red;
flex-basis: 150px;
flex-shrink: 1;
}
.example-last{
background:orange;
flex-basis: 200px;
flex-shrink:1;
}
</style>
在上面的代码中，flex container宽度为250px，而两个flex item宽度加起来有350px，所以要腾100px空间出来。
计算的方式是，每个flex item的flex-basis值乘以flex-shrink值求积，求和所有flex items的乘积，然后求占比，再乘以要腾出的空间。
.exampel-last: (200 * 1) / ((200 * 1) (150 * 1)) * 100 = 57.1428571429
所以.example-first的宽度为150 – 42.8571428571 = 107px，.example-last的宽度为200 – 57.1428571429 = 143px。
您可能感兴趣的文章：
CSS3 flex-shrink属性用法详解
CSS3中flex-basis属性用法详解
CSS flex 属性
CSS flex-shrink 属性
CSS flex 属性
CSS flex-flow 属性
CSS flex-flow 属性
CSS flex-wrap 属性
CSS flex-grow 属性
Flex网页布局基础入门及实例教程