我们都知道，flex属性是flex-增长、flex-收缩和flex-基属性的缩写。默认值为0 1 auto，即
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
但我注意到，在很多地方使用flex: 1。是11auto的缩写还是10auto的缩写?我不明白那是什么意思，我谷歌的时候什么都得不到。
当前回答
在Chrome Ver 84中，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上。
如果你期待 用户仍然使用旧版本的浏览器，那么添加单元是一个更安全的赌注。
我也对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
下面是解释:
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%.
