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

flex：1和flex-grow：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

控制列方向容器中的高度。

在Chrome中，使用时

flex-basis: auto

，元素的高度为450px（父级为500px-标头为50px）。换句话说，

flex-grow

可以自由分配自由空间。

使用

flex-basis: 0

，元素的高度为0，并且

flex-grow

没有可分配的自由空间。

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