flex-shrink
指定了 flex 元素的收缩规则。
设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。
解决方案：给右侧设置了flex:1的元素，同时设置width:0
flex 布局，我相信大家都非常熟悉, 但是要说到 flex:1 表达的含义，我相信很多同学说不出来。
很多同学入门flex 的时候，应该都是看了 阮一峰的flex 科普文章
想要梳理清晰flex:1的含义，我们先学习下flex 这个css属性表达了哪些含义
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
从这里就可以推导出
相当于
我一开始理解的也是这样。 后面的分析会推翻我这里的结论
flex-basis 也是一个比较难理解的点，我写了 深入理解flex-basis 来梳理这个知识点，不懂得可以查看。这里我们重点解析flex:1。
我写了一个简单的demo 来提供分析：
我们看下浏览器输出的效果：
可以看到，无论内容是多少，我们都实现等分。
我们看下控制台：
发现：
其实相当于：
看另一个例子：
浏览器显示效果：
依然是等分
再来一个类似的例子：
浏览器显示效果：
依然是等分
从以上的分析调试，我们可以初步分析
接下来，看下 flex: 1 1 auto 的效果
浏览器显示效果：
没有等分
写到这里，我们在细细品味下flex-basic的含义
auto 表示项目本身的大小, 如果设置为 auto, 那么这三个盒子就会按照剩余的空间，等比例缩放
如果随便设置一个其他带有长度单位的数字呢, 例如
又因为 c1.width = c2.width = c3.width，所以最终的效果就是 c1, c2, c3 进行了等分缩放。
flex 大致分为两类属性：容器属性和项目属性（容器内部项目的属性）。flex 属性（ flex：1 ）如就给容器内部项目设置的属性。
这里的 wrap 指容器，item 我们称作项目。我们还需要知道 flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。接下来我们逐一介绍这三个属性:
flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。
从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194，加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度，如果我们给它们加上 width 会怎么计算呢？
我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194，加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢？仔细看定义后知道，我们给 wrap 设置了 width 为 200px，三个 item 设置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。
设置项目的收缩比例，如果空间不足，该项目将缩小。
默认值为 1。
设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。
