flex-grow、flex-shrink、flex-basis详解

1.flex-basis
flex-basis等同于width，不过优先级高于width，很少用到。

2.flex-grow
grow英文意思是扩大，也就是说，父元素有剩余空间（父元素大于子元素宽度之和），子元素会扩大，占满父元素空间。
flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间。
flex-grow的为1，代表总剩余空间n分之一。n为flex-grow的和。
也就是说，如果子元素的flex-grow和为4，那么flex-grow为1占据其中的1/4剩余空间。

3.flex-shrink
shrink英文意思是收缩。也就是说，父元素空间不足（父元素小于子元素宽度之和），
子元素会缩小。
flex-shrink的默认值为1。
flex-shrink设为0，表示不缩小，常用到。

4.简写
flex是flex-grow，flex-shrink, flex-basis的简写，比如，下面是等效的：
.item {flex: none;}
.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}

参考资料：
https://blog.csdn.net/m0_37058714/article/details/80765562