伸缩布局flex取值的区别

---

伸缩布局中的flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。flex-grow属性设置项目的放大比例，默认为0，即如果存在剩余空间，也不放大。flex-shrink属性设置项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性设置在分配多余空间之前，项目占据的主轴空间，默认值为auto，即项目的本来大小。

flex取值情况如下：

1. flex取值为none，即0 0 auto。等同于flex-grow:0; flex-shrink:0; flex-basis:auto。

2. flex取值为auto，即1 1 auto。等同于flex-grow:1; flex-shrink:1; flex-basis:auto。

3. flex取值为非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%。

4. flex取值为一个长度或百分比，则为flex-basis的值，flex-grow和flex-shrink均取1。

5. flex取值为两个非负数字，则分别为flex-grow和flex-shrink的值，flex-basis取0%。

6. 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

转载于:https://www.cnblogs.com/Jianxq12/p/7425928.html