写在前面：重点看总结，中间是介绍flex代表的三个属性的作用
介绍 flex: １
flex: 1 是三个属性的缩写：flex-grow: 1; flex-shrink: 1; flex-basis: auto
flex的默认值为 0 1 auto
为什么设置成1 1 auto可以实现自适应呢
flex-basis:
flex-basis: 为div的内容盒 (content-box) 初始大小，也就是规定了元素初始在主轴的大小。优先级是大于 width 的。内容盒就是我们熟悉的盒模型
后面两个就比较重要，一个是当空间不够的表现，一个是当空间多余的时候的表现；
flex-shrink:
flex-shrink:当空间不够时，如果flex-shrink为1，就会按比例压缩。因为每个元素的flex-shrink的默认值都为1，所以当空间不够是会同比例缩小。
这里就做到了空间不够时的自适应
flex-grow：
flex-grow：当空间不够时，元素会按flex-grow的值等比放大。
问题是，flex-grow默认值为0，即如果存在剩余空间，也不放大。
那么如果设置了flex-grow为1。其他元素都是0, 0 1 0，那么分配多余空间的时候，按flex-grow的比例分（0 1 0），中间的就会拿到所有的多余空间撑大自适应。
总结
flex：1 大都用在上下固定中间自适应的布局场景中。本质原因其实也很简单，主要是flex-grow的默认属性是0，如果中间的元素设置为1，那么分配多余空间的时候，按flex-grow的比例分（0 1 0），中间的就会拿到所有的多余空间撑大自适应。flex-shrink表示空间不够压缩的情况，默认都为1，一起压缩变小。
如有纰漏，麻烦不留余力提醒；
