flex：1是什么意思？

我们都知道，该flex属性是一个速记flex-grow，flex-shrink和flex-basis属性。其默认值为0 1 auto，表示

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

但我注意到，在很多地方flex: 1都使用过。是速记1 1 auto还是1 0 auto？我不明白这是什么意思，而我在Google上一无所获。

这里是解释：

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

flex：<positive-number>
等效于flex：<positive-number> 10。使flex项目具有弹性，并将flex基础设置为零，从而使该项目接收flex容器中指定比例的可用空间。如果flex容器中的所有项目都使用此模式，则它们的大小将与指定的flex系数成比例。

因此flex:1相当于flex: 1 1 0

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:1 1 0;

flex:1;= flex:1 1 0n;（其中n是长度单位）。

• flex-grow： 一个数字，用于指定项目相对于其余柔性项目将增长多少。
• flex-shrink 一个数字，指定项目相对于其余柔性项目将收缩多少
• flex-basis项目 的长度。合法值：“自动”，“继承”或数字，后跟“％”，“ px”，“ em”或任何其他长度单位。

这里的重点是flex-basis需要长度单位。

以Chrome为例，flex:1并flex:1 1 0产生不同的结果。在大多数情况下，它似乎flex:1 1 0;可以正常工作，但让我们检查一下实际发生的情况：

例

Flex基础将被忽略，仅应用flex-grow和flex-shrink。

flex:1 1 0;= flex:1 1;=flex:1;

乍一看，这似乎可以，但是如果容器的应用单元是嵌套的，则可以。期待意外！

在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>

兼容性

应当指出，这失败是因为某些浏览器未能遵守该规范。

使用完整的flex规范的浏览器：

• Firefox-✓
• Edge-✓ （我知道，我也感到震惊。）
• 铬-x
• 勇敢-x
• 歌剧-x
• IE- （大声笑，它不带长度单位，但不带长度单位。）

更新2019

最新版本的Chrome似乎终于可以解决此问题，但其他浏览器仍然没有。

经过测试并在Chrome Ver 74中工作。