下面本文章来给各位介绍一下CSS3 flex-shrink使用方法，希望例子能帮助到各位。
flex-grow控制flex container有多余空间的时候怎么分配，默认值为0，即所有的flex items都不分配。
flex-shrink1则控制flex container空间不足以包含flex items时，flex items怎样缩小所占空间，来防止溢出container。其默认值为1，flex items们根据自身的flex-basis值做相应调整。
看一个示例：
| 代码如下 | 复制代码 | ||||
|
汇成一道道光的流河
我曾在天上见过地的繁华
.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; }
在上面的代码中，flex container宽度为250px，而两个flex item宽度加起来有350px，所以要腾100px空间出来。 计算的方式是，每个flex item的flex-basis值乘以flex-shrink值求积，求和所有flex items的乘积，然后求占比，再乘以要腾出的空间。
| |||||
