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

在 mdn

> flex：1

意思是一样的

> flex-grow：1.

但实际上它在浏览器中有不同的表现.

您可以通过更改css中的注释在此jsFiddle中尝试它.

当我使用flex：1时,classname为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>

解决方法

柔性

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或％)以flex为基础附加到0值.这可以产生影响(example).

FLEX-增长

flex-grow属性(在弹性项目中分配容器中的可用空间),当它们自己声明时,会在其初始值处保留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父级–50px标题).换句话说,flex-grow可以自由分配自由空间.

使用flex-basis：0时,元素的高度为0,flex-grow没有可分配的空闲空间.

灵活项目的子项的高度：100％被忽略,因为它未正确应用,如这些帖子中所述：

> Working with the CSS height property and percentage values
> Chrome / Safari not filling 100% height of flex parent

在阅读上面的帖子时,您还将理解为什么您的代码在Firefox,Safari,Edge和IE中的呈现方式不同.