flex-grow:：当父控件还有剩余空间的时候，是否进行放大(grow)，其中数值代表的是放大比例，值为0的时候表示不放大；
flex-shrink：当父控件空间不够的时候，是否进行缩小(shrink)，其中数值代表的是缩小比例，值为0的时候表示不缩小；
flex-basis：表示在flex items 被放入flex容器之前的大小，也就是items的理想或者假设大小，但是并不是其真实大小，其真实大小取决于flex容器的宽度、flex items的min-width、max-width等其他样式
- 当flex-basis和width属性同时存在时，width属性不生效，flex item的宽度为flex-basis设置的宽度；
- flex items宽度的应用准则：flex-basis (受制于 max|min-width) 优先级大于 width 优先级大于 content；
-
.flex-item{ flex-basis: 300px; // 失效 max- 100px; } .item1{ background: #66efab; }
需求：希望底部的内容一直在底部，只有当中间内容多到屏幕底部的时候，底部的内容才自动移出屏幕。大概就是下面这个效果，当绿色的内容多到黄色区域的时候黄色区域自动移动出屏幕：
解决办法：3个子view套一个父view，父view设置一个min-height:100%; display:flex; flex-direction:column;，中间的view设置flex:1;
flex是 flex-grow，flex-shrink，flex-basis的缩写
flex的默认属性是0 1 auto，【父控件有剩余控件也不放大，父控件空间不足按1缩小，保持本身的空间大小】；
flex:1;的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】；
当 flex:none;的值为 0 0 auto；
当 flex:auto;的值为 1 1 auto；
当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%；
当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1；
当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%；
当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1；