定义：flex-shrink指定了flex元素的收缩规则，当flex元素的宽度/高度 > 父容器的宽度 / 高度 时发生收缩

当flex-shrink为0时

此时main的width为400px，而其五个item的width为100px,显然超过了main的宽度，因此为了适应main的宽度，item的宽度在实际的显示中为80px

当给item元素定义flex-shrink为0后，item(flex元素)将不会进行收缩，而是按照原本的大小进行显示，这样就会超出父级元素的宽度

给flex-shrink定义其他大于0的值

我们可以看到，给五个flex元素都定义了flex-shrink为大于0的值，当这五个flex元素的宽度 / 高度超过父容器时，就会按照各自设定的flex-shrink进行收缩，各个flex元素在收缩以后，其显示的宽度 / 高度计算方式如下：

如果所有flex元素不进行收缩(flex-shrink:0)时超出父元素的宽度（diff）：父元素的高度 / 宽度 - flex元素的高度 / 宽度 例如：当前例子的父元素宽度为400px,五个flex子元素的总宽度为500px,超过父元素宽度100px

flex元素收缩后的宽度 / 高度：flex元素的设定高度 / 宽度 - diff * (当前flex元素的flex-shrink/总flex-shrink份数) 例如： 计算item2的收缩后宽度 = 100px - 100px * 2/6 注意： 一定要是flex元素，也就是其父级元素被定义为display: flex