影响flex元素占据空间的因素有三个：flex-grow、flex-shrink、flex-basis，下面一一分析。
flex-basis
flex-basis指定了flex元素在主轴方向上的初始大小。默认值为auto，大小为元素的宽度/高度。如果设置了具体值，则占用的空间为设定的值（覆盖设置的width），但是受限于min-width和max-width。当设置为0时，空间大小也为元素的宽度/高度。
demo：
See the Pen
NoWpRj by abcdGJJ (@abcdGJJ)
on CodePen.
flex-grow
flex-grow定义当剩余空间大于项目空间之和时，项目的拉伸比例。默认值为0，即不拉伸项目。
元素空间计算规则：flex-basis宽度 + (元素的flex-grow值 / flex-grow总和)*剩余空间。
demo：
See the Pen
MLWmgx by abcdGJJ (@abcdGJJ)
on CodePen.
flex-shrink
flex-shrink定义当项目空间之和大于容器时，项目的收缩比例。默认值为1，即收缩比例为1。设置为0则表示不收缩。
元素空间计算规则：flex-basis宽度 - (元素的flex-shrink值*width(或flex-basis) / Σflex-shrink值*width(或flex-basis))*多出空间。
demo：
See the Pen
KJKmaE by abcdGJJ (@abcdGJJ)
on CodePen.
flex
flex是flex-grow, flex-shrink与flex-basis的简写。详见mdn flex
