flex：1学习笔记

Flexbox,终于可以承认自己明白了
阮一峰Flex教程
flex详解
flex是flex-grow flex-shrink flex-basis 三个值的缩写

flex-grow：属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 (指定当前项如何扩展)

flex-shrink:属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。(指定当前项如何收缩)

flex-basis:属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。(指定分配剩余空间之前当前项的初始大小)

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%：
{flex:1}即为：{ flex-grow:1; flex-shrink:1; flex-basis:0%}

flex的默认值为：{flex:0 1 auto ;}

ps:
后续补充一个demo来加深对flex的理解