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

它的作用:

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

(来源:CSS技巧)

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

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

(来源:MDN)

在Chrome Ver 84中，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%.

默认值被设置为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: 11 10;

flex: 1;= flex:1 1 0n;(其中n为长度单位)。

flex-grow:指定项目相对于其他灵活项目将增长多少的数字。 一个数字，指定该项相对于其他可伸缩项的收缩量 flex-basis项的长度。合法值:"auto"， "inherit"，或数字后面加"%"，"px"， "em"或任何其他长度单位。

这里的关键点是，弹性基需要一个长度单位。

在Chrome中，例如flex:1和flex: 11产生不同的结果。在大多数情况下，可能会出现flex: 11 10;是有效的，但让我们来看看到底发生了什么:

例子

忽略Flex基，只应用Flex -增长和Flex -收缩。

Flex: 11 10;= flex:1;= flex: 1;

乍一看，如果容器的应用单元是嵌套的，这可能是ok的;期待意外!

在CHROME中试试这个例子

.Wrap{ padding:10px; background: #333; } .Flex110x, .Flex1, .Flex110, .Wrap { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } .Flex110 { -webkit-flex: 1 1 0; flex: 1 1 0; } .Flex1 { -webkit-flex: 1; flex: 1; } .Flex110x{ -webkit-flex: 1 1 0%; flex: 1 1 0%; } FLEX 1 1 0 <div class="Wrap"> <div class="Flex110"> <input type="submit" name="test1" value="TEST 1"> </div> </div> FLEX 1 <div class="Wrap"> <div class="Flex1"> <input type="submit" name="test2" value="TEST 2"> </div> </div> FLEX 1 1 0% <div class="Wrap"> <div class="Flex110x"> <input type="submit" name="test3" value="TEST 3"> </div> </div>

更新2021

所有主流浏览器的最新版本似乎都实现了flex: 1并符合W3C标准。这在Chrome、Opera、Edge、Firefox、Safari、Chromium和一些Chromium变体(如macOS、Windows、Linux、iOS和Android上的Brave)上得到了验证。在尝试在ie浏览器中测试时，Edge浏览器被强制加载在Windows 10上。

如果你期待 用户仍然使用旧版本的浏览器，那么添加单元是一个更安全的赌注。

下面是解释:

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

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

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