相信大家用过flex布局都会用到flex:1这样的语句来平分空间,但是关于flex:1实际等于什么却没有细细探索过。
首先flex这个属性是一个缩写,实际上代表的是:
flex:flex-grow || flex-shrink || flex-basis
flex:1实际上是以上三种属性的缩写形式。
- flex-grow//定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
- flex-shrink //定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小
- flex-basis//定义了在分配多余空间之前,默认是auto,即项目本来的大小
flex这个缩写属性有一个规则,我总结如下:
- flex后面只有一个值且无单位,代表的是flex-grow
- flex后面有两个值且无单位,则依次代表flex-grow和flex-shrink
- flex后面有单位,则表示flex-basis
所以,flex:1其实代表的是flex-grow:1,另外两个取默认值即可,答案呼之欲出:
flex:1 实际代表的就是 flex:1 0 auto
后面去查了MDN,也说flex:1实际代表的是flex:1 0 auto。
但是在谷歌浏览器中输入flex:1,查看样式发现flex:1代表的是flex:1 1 0%
所以究竟哪个对呢?而且0%是什么玩意?
仔细看看flex-basis的定义:
是说定义了在分配多余空间之前,默认是auto,即项目本来的大小。
翻译一下就是flex-basis决定了子项目原本占据多大空间,然后再去分配剩余空间。
之所以谷歌浏览器中要使用flex-basis:0%,我想是出于这样的场景考虑:
我定义了三个盒子,宽度分别是100px / 200px / 300px
我想实现三等分浏览器窗口,这个时候如果设置flex:1 0 auto,我们会发现三个盒子并不是平均三等分的,而是有一定比例的。
设置成flex:1 0 0%才会三等分窗口,意思是先将这三个盒子的原始宽度都置为0%,即将原始宽度都设置成一样大,这样才会等分。
但是我们使用flex:1更多情况就是为了等分,实际上设置成flex:1 0 1px / flex:1 0 2px / flex:1 0 2em 甚至任何有数值的长度都能实现等分的效果,原理和上述一样。
总结:
flex:1实际代表flex:1 0 auto,但在某些浏览器的具体实现中考虑到我们日常业务场景会设置成flex:1 0 0%