flex宽度相关的属性有三个 flex-grow，flex-shrink，flex-basis。下面分别介绍其相关特点：
flex-grow 扩大因子，主轴有剩余空间时，元素分配到剩余空间的比率
flex-shrink 收缩因子，主轴剩余空间为负时，元素分配到剩余空间的比率
flex-basis：设置元素初始大小，若未设置，则水平排列默认为元素的宽度，垂直排列默认为元素的高度
当flex-basis为0时，例如(flex:1)，此时item的宽度不受width的影响
当flex-basis为auto时，item的宽度随着width的变化增大或缩小
flex是flex-grow，flex-shrink，flex-basis的简写，简称GSB
flex的写法与三个属性的对照表
flex: none => flex: 0 0 auto;
flex: auto => flex: 1 1 auto;
flex: 0 => flex: 0 1 0%;
flex: 1 => flex: 1 1 0%;
flex: 0 auto => flex: 0 1 auto;(默认值)
flex: 0 1 => flex: 0 1 0%;