flex:1和flex:grow:1的区别

• flex = 1 的时候，设置了 三个属性

       flex-grow=1，flex-shrink=1，flex-basis=0%

• 只设置 flex-grow =1 的时候

     flex-grow=1，flex-shrink=1（默认值），flex-basis=auto（默认值）

1.   flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink 的值。
2.  flex-basis 属性用于设置或检索弹性盒伸缩基准值
3. 从上面可以看出两者的区别是在于flex-basis的值，使用flex-basis：auto,元素的高度为450px(500px父级–50px标题).换句话说,flex-grow可以自由分配自由空间；使用flex-basis：0时,元素的高度为0,flex-grow没有可分配的空闲空间.