我们都知道，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; ➜ 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%.
其他回答
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: 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上。
如果你期待 用户仍然使用旧版本的浏览器，那么添加单元是一个更安全的赌注。
在Chrome Ver 84中，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)
