flex-basis、flex-grow、flex-shrink

这几个属性配合使用可以更细化的控制Flex布局，flex-basis和flex-grow可控制如何分配Available Space，flex-shrink处理当布局空间不足时如何缩减元素自身所占空间。
先看一下Available Space示意图， 如下图所示区域：

available-space.png

• flex-basis 默认值是auto，指定了 flex 元素在主轴方向上的初始大小，定义了Available Space大小的基准值，容器宽度 - 所有的元素的flex-basis和 = Available Space。flex-basis的默认值是auto，设置此值时，浏览器会去检测当前的元素是否具备确定尺寸，如果存在，则这个尺寸大小就是flex-basis 的值，否则检测flex-basis是否设置了自定义值并按照设置的值布局。
• flex-grow 默认值0，表示不拉伸，负值无效，作用就是按照比例瓜分Available Space，
• flex-shrink 默认值1，容器里所有元素的此属性设置为1时表示等比收缩元素的大小，否则就是按比例值收缩，负值无效