下面是解释:

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

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

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

默认值被设置为1 1 0%(分别是弹性-增长-弹性-收缩-弹性-基数的简写值)，可能是因为这些值对“弹性”项最有意义。以下是这些值的具体含义:

flex-basis: It specifies the ideal size for the items. Ideal means "assuming there is neither any extra space, nor any shortages of the space". 0% means we have no ideal size for them, we want them to be sized truely flexibly. We want them to be sized automatically(thus the word "flexible") based on the available space. flex-grow: After taking the flex-basis into consideration, if there's remaining extra space, it specifies how "that extra space"(notice we're not talking about the whole space) must be divided between the items. The ones with higher flex-grow will eat up more of the extra space. It makes sense to use an equal flex-grow on all items by default so that all items will have the same share of the extra space. When flex-basis is 0%, a flex-grow of 1 on all items makes them divide "the whole space of the container"(since flex-basis used no space, the extra space equals the whole space of the container). flex-shrink: After taking the flex-basis into consideration, if the available space is not enough, it specifies how "the shortage of space"(and again, not the whole space) must be divided(imposed on) among the items. The ones with higher flex-shrink will have to "endure" more of that shortage.

例子:

在3个项目上的400px的弹性基础，意味着我们宁愿有3个宽为400px的项目。现在，会发生什么: 如果我们有多余的空间?假设容器宽度是1500像素宽。这3个物品将占用1200像素，那额外的300像素会发生什么? 如果我们的集装箱空间不足?例如，如果在一个1500px的容器中有5个400像素的项目(短缺= |1500px - 5 * 400px| = 500px)。

以上两个问题的答案是弹性增长(回答第一个问题)和弹性收缩(回答第二个问题)。

例如，如果三项中的一项具有5的弹性增长，而其他项仍然保持默认值(即。1) ?然后，flex-grow为5的函数将获得(300px /(1+1+5)) * 3的额外空间。

另一个有用的例子是，如果你有一个伸缩容器，你想让每个子容器都取父容器的全宽度(例如:在这种情况下，你可以在所有的子元素上使用flex: 00 100%，这样项目就会有一个弹性基础，即父元素的全宽度，并关闭它们的增长/收缩。

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

下面是解释:

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(而默认值为0)。

它的作用:

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

(来源:CSS技巧)

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

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

(来源:MDN)