关于 flex:1 实际代表产生的思考

相信大家用过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这个缩写属性有一个规则，我总结如下：

1. flex后面只有一个值且无单位，代表的是flex-grow
2. flex后面有两个值且无单位，则依次代表flex-grow和flex-shrink
3. 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%