flex: 1是什么意思?

我们都知道，flex属性是flex-增长、flex-收缩和flex-基属性的缩写。默认值为0 1 auto，即

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

但我注意到，在很多地方使用flex: 1。是11auto的缩写还是10auto的缩写?我不明白那是什么意思，我谷歌的时候什么都得不到。

当前回答

Flex: 1将Flex -grow设置为1(而默认值为0)。

它的作用:

如果所有项都将flex-grow设置为1，则容器将平均分配给所有孩子。如果其中一个 Children的值为2，剩余的空间将占用2倍的空间它的空间比其他的要大(至少它会尝试这么做)。

(来源:CSS技巧)

对于带无单位数的单值flex语法(而不是另一种选择flex- base的值)，

.．.它被解释为flex: <number> 10 0;的假设弹性收缩值为1，弹性基值为假设是0。

(来源:MDN)

2021-03-03 00:55:08

其他回答

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

2021-11-08 20:31:35

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%.

2016-05-23 08:48:16

下面是解释:

https://www.w3.org/TR/css-flexbox-1/#flex-common

flex: <正数> 等价于flex: <positive-number> 10 0。使伸缩项具有灵活性，并将伸缩基设置为零，导致项为接收flex中指定比例的空闲空间容器。如果伸缩容器中的所有项都使用此模式，则它们的尺寸将与指定的伸缩系数成比例。

因此flex:1相当于flex: 11 10

2016-05-23 09:03:39

在Chrome Ver 84中，flex: 1相当于flex: 11的10%。以下是一组截图。

2020-08-18 06:08:36

我也对flex: 1感到困惑，所以我将在这里分享我理解这个属性的方式:)

要理解flex: 1的概念，首先我们必须确保父元素有一个显示属性设置为flex，即display: flex。现在，父元素内嵌套的flex元素可以使用flex: 1。

现在的问题是这对弯曲元素有什么影响?如果一个元素具有flex: 1，这意味着所有其他元素的大小将与它们的内容具有相同的宽度，但具有flex: 1的元素将拥有剩余的全空间。请看下面的插图。

2021-06-28 21:03:17