浅谈flex:1

flex是基于一个轴线上的布局。
只有父容器设置了display:flex;子容器的flex: 1才会生效。
其中，这个flex:1其实隐含了三个属性

1、flex-grow拉伸因子（默认值：0）
2、flex-shrink收缩规则（默认值：1）
3、flex-basis伸缩基数（默认值： auto）

先说第一个flex-grow拉伸因子，当子容器的宽度相加小于父容器，就会产生剩余空间，那么剩余空间将会按照比例分给子容器。（这个属性只在父容器有剩余空间时才生效）

第二个flex-shrink收缩规则，是当子容器的宽度相加大于父容器时，这时会产生一个缺少的空间，（子元素默认超出父容器是不会换行的，因为flex-wrap默认值为auto），因此按照flex-shrink的值，子容器会等比进行收缩。

第三个flex-basis伸缩基数，也可以近似当作子容器的宽度width，只不过flex-basis的优先级会高于width（注意：这两个中有一个是auto，另一个非auto的优先级会更高）

因此，说了这么多，其实flex：1，它代表的就是

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

在浏览器中也可以看到

那么问题又来了，为什么flex：1里面的1代表的是flex-grow呢？
其实
1、当flex的值为非负数字是，只有一个时，它就代表flex-grow，有两个就依次代表flex-grow和flex-shrink。
（举个🌰 flex：1 2；就等于flex-grow：1，flex-shrink：2）
2、当flex的值为百分比（%）或者长度（px,em…）时，它就代表flex-basis的值
（举个🌰 flex：10%; flex: 100px;分别代表flex-basis：10%和flex-basis：100px）
当然flex的值不止以上两种情况，还有none，auto。。。。

以上是对flex：1比较浅的理解，如果错误的地方请指正。