css的flex为1是什么意思呢

Question

1. / -webkit-box-flex: 1; /
2. / -webkit-flex: 1; /
3. / flex: 1; /

Answer 1

MDN是个好东西

Answer 2

根据mdn的资料显示：

CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。

所以，flex:1其实就是设置了三个属性：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

这其中起到最关键作用的就是flex-grow属性了，它指定了flex容器中剩余空间的多少应该分配给项目（flex增长系数），而这个系数如果不设置时默认是0，代表的意义就是即使flex容器有剩余空间，那么项目（flex-item）也不会使用那些剩余空间。所以如果一个flex-item的flex-grow为1而其他的flex-item没有设置，则设置了的就使用剩余空间的1/1*100%=100%的空间。

至于flex-shrink：1和flex-basis: 0%代表的含义，一个代表flex-item的收缩规则（仅在flex-item宽度总和大于flex-box时才起作用），一个代表flex-item在主轴方向上的初始大小。

-webkit-box-flex: 1;和-webkit-flex: 1;是浏览器兼容前缀

Answer 3

都是1就是等份大小

Answer 4

当flex取值为一个非负数字，则该数字为flex-grow的值.
https://blog.csdn.net/aliven1...

Answer 5

戳->控制Flex子元素在主轴上的比例