伸缩布局中的flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。flex-grow属性设置项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink属性设置项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis属性设置在分配多余空间之前,项目占据的主轴空间,默认值为auto,即项目的本来大小。
flex取值情况如下:
flex取值为none,即0 0 auto。等同于flex-grow:0; flex-shrink:0; flex-basis:auto。
flex取值为auto,即1 1 auto。等同于flex-grow:1; flex-shrink:1; flex-basis:auto。
flex取值为非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%。
flex取值为一个长度或百分比,则为flex-basis的值,flex-grow和flex-shrink均取1。
flex取值为两个非负数字,则分别为flex-grow和flex-shrink的值,flex-basis取0%。
flex 取值为一个非负数字和一个长度或百分比,则分别为 flex-grow 和 flex-basis 的值,flex-shrink 取 1。flex-basis 规定的是子元素的基准值。
flex取值详解参见以下链接
https://segmentfault.com/q/1010000004080910/a-1020000004121373
flex布局语法参见以下链接
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex布局实例参见以下链接
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html