干嘛的？
比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。我擦，这不脑残么？ 超了怎么办？还有得救。flex-shrink 按比例压缩。
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
#flex{display:-webkit-flex;display:flex;width:400px;margin:0;padding:0;list-style:none;}
#flex li{width:200px;}
#flex li:nth-child(1){background:#888;}
#flex li:nth-child(2){background:#ccc;}
#flex li:nth-child(3){-webkit-flex-shrink:3;flex-shrink:3;background:#aaa;}
</style>
</head>
<body>
<ul id="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
上述代码中第三个li设置了flex-shrink属性为3，另外两个没设置，没设置默认1. 好。现在多戳200px。分成5份。
按比例压缩吧
a压缩200（1/5)=40px;
b同理40px;
c压缩200（3/5)=120px;
image.png
总结
看明白了就是soeasy
这个属性菜鸟教程讲的不清楚
