我们都知道，flex属性是flex-增长、flex-收缩和flex-基属性的缩写。默认值为0 1 auto，即
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
但我注意到，在很多地方使用flex: 1。是11auto的缩写还是10auto的缩写?我不明白那是什么意思，我谷歌的时候什么都得不到。
当前回答
我也对flex: 1感到困惑，所以我将在这里分享我理解这个属性的方式:)
要理解flex: 1的概念，首先我们必须确保父元素有一个显示属性设置为flex，即display: flex。现在，父元素内嵌套的flex元素可以使用flex: 1。
现在的问题是这对弯曲元素有什么影响?如果一个元素具有flex: 1，这意味着所有其他元素的大小将与它们的内容具有相同的宽度，但具有flex: 1的元素将拥有剩余的全空间。请看下面的插图。
其他回答
Flex: 1相当于Flex: 1 0 0和Flex: 11 10 0
请查看我分别为Flex: 1和Flex: 1 0 0和Flex: 1 10 0所拍摄的输出图像
Flex: 1 Flex: 1 0 0 Flex: 11 10
我也对flex: 1感到困惑，所以我将在这里分享我理解这个属性的方式:)
要理解flex: 1的概念，首先我们必须确保父元素有一个显示属性设置为flex，即display: flex。现在，父元素内嵌套的flex元素可以使用flex: 1。
现在的问题是这对弯曲元素有什么影响?如果一个元素具有flex: 1，这意味着所有其他元素的大小将与它们的内容具有相同的宽度，但具有flex: 1的元素将拥有剩余的全空间。请看下面的插图。
在Chrome Ver 84中，flex: 1相当于flex: 11的10%。以下是一组截图。
下面是解释:
https://www.w3.org/TR/css-flexbox-1/#flex-common
flex: <正数> 等价于flex: <positive-number> 10 0。使伸缩项具有灵活性，并将伸缩基设置为零，导致项为 接收flex中指定比例的空闲空间 容器。如果伸缩容器中的所有项都使用此模式，则它们的 尺寸将与指定的伸缩系数成比例。
因此flex:1相当于flex: 11 10
Flex: 1表示:
flex-grow : 1; ➜ The div will grow in same proportion as the window-size
flex-shrink : 1; ➜ The div will shrink in same proportion as the window-size
flex-basis : 0; ➜ The div does not have a starting value as such and will
take up screen as per the screen size available for
e.g:- if 3 divs are in the wrapper then each div will take 33%.
