flex：1和flex-grow：1之间的区别

Question

在mdn

• flex:1

与...相同

• flex-grow:1。

但是，实际上它在浏览器中有不同的显示。

您可以通过更改CSS中的注释在jsFiddle中进行尝试。

当我使用flex: 1元素时，其类test-container名将是，height:100%但使用时不会发生flex-grow: 1。

我不明白为什么。寻求帮助。非常感谢。

.flex-1 {
  display: flex;
  flex-direction: column;
  height: 500px;
  background: red;
}

.child-1 {
  height: 50px;
  background: blue;
}

.child-2 {
  flex-grow: 1;
  /* flex:1; */
  background: green;
}

.test-container {
  display: flex;
  flex-direction: row;
  background: white;
  height: 100%;
}

<div class="flex-1">
  <div class="child-1"></div>
  <div class="child-2">
    <div class="test-container"></div>
  </div>
</div>

Answer 1

flex

该flex属性是设置的简写：

• flex-grow
• flex-shrink
• flex-basis

该flex: 1规则应对此进行计算：

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

这些值在规范中定义。参见7.1.1节。的基本价值flex

我之所以说“应该计算”，是因为在IE11和可能的其他浏览器中，度量单位（例如px或%）被附加到中的0值flex-basis。这可以有所作为（例如）。

flex-grow

该柔性成长属性（它在容器弯曲项目之间分配的可用空间），其本身的叶子声明时flex-shrink，并flex-basis在它们的初始值。

因此，当您设置时flex-grow: 1，浏览器将呈现以下内容：

• flex-grow: 1 （覆盖默认值0）
• flex-shrink: 1 （这是默认值）
• flex-basis: auto（这是默认值）

flex: 1和之间的区别flex-grow: 1

最终，之间的区别flex: 1，并flex-grow: 1为前者套flex-basis: 0，而后者保持默认flex-basis: auto。

对于之间的差异的完整解释flex-basis: 0，并flex-basis: auto看到这个帖子：

• 根据原始大小灵活伸缩扩展项目

您的代码示例

您在代码中看到差异的原因是flex-basis控制列方向容器中的高度。

在Chrome中，使用时flex-basis: auto，元素的高度为450px（父级为500px-标头为50px）。换句话说，flex-grow可以自由分配自由空间。

使用flex-basis: 0，元素的高度为0，并且flex-grow没有可分配的自由空间。

如以下height: 100%文章所述，由于未正确应用flex项的on子项，因此将其忽略：

• 使用CSS height属性和百分比值
• Chrome / Safari无法填充Flex父级的100％高度

通过阅读以上文章，您还将理解为什么代码在Firefox，Safari，Edge和IE中呈现不同的原因。