css - flex :1 and 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. Basic Values of flex 部分

我之所以说“应该计算”，是因为在IE11和可能的其他浏览器中，将一个度量单位(例如 px或 %)附加到 0中的 flex-basis值中。这可以有所作为( example)。
flex-grow
flex-grow属性(在 flex 元素之间分配容器中的自由空间)在自己声明时，将 flex-shrink和 flex-basis保留为其初始值。

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

flex-grow: 1(overrides the default value, which is 0)

flex-shrink: 1(this is the default value)

flex-basis: auto(this is the default value)

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

最终， flex: 1和 flex-grow: 1之间的区别在于，前者设置 flex-basis: 0，而后者保留默认的 flex-basis: auto。

有关 flex-basis: 0和 flex-basis: auto之间的区别的完整说明，请参见以下文章:

Make flex-grow expand items based on their original size

您的代码示例

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

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

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

只是忽略了flex项的子项上的 height: 100%，因为未正确应用它，如这些帖子中所述:

Working with the CSS height property and percentage values

Chrome / Safari not filling 100% height of flex parent

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