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

在 mdn

> flex：1@H_301_3@

意思是一样的@H_301_3@

> flex-grow：1.@H_301_3@

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

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

当我使用flex：1时,classname为test-container的元素将为height：100％,但使用flex-grow时不会发生：1.@H_301_3@

我不明白为什么.寻求一些帮助.非常感谢.@H_301_3@

.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属性是设置的简写：@H_301_3@

> flex-grow
> flex-shrink
> flex-basis@H_301_3@

flex：1规则应该计算到：@H_301_3@

> flex-grow：1
> flex-shrink：1
> flex-basis：0@H_301_3@

这些值在规范中定义.见7.1.1. Basic Values of flex节@H_301_3@

我说“应该计算”因为,在IE11和可能的其他浏览器中,度量单位(例如px或％)以flex为基础附加到0值.这可以产生影响(example).@H_301_3@

FLEX-增长@H_301_3@

flex-grow属性(在弹性项目中分配容器中的可用空间),当它们自己声明时,会在其初始值处保留flex-shrink和flex-basis.@H_301_3@

因此,当您设置flex-grow：1时,浏览器呈现以下内容：@H_301_3@

> 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)@H_301_3@

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

最终,flex：1和flex-grow：1之间的区别在于前者设置flex-basis：0,后者保持默认的flex-basis：auto.@H_301_3@

有关flex-basis：0和flex-basis之间区别的完整解释：auto请看这篇文章：@H_301_3@

> Make flex-grow expand items based on their original size@H_301_3@

你的代码示例@H_301_3@

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

在Chrome中,使用flex-basis：auto,元素的高度为450px(500px父级–50px标题).换句话说,flex-grow可以自由分配自由空间.@H_301_3@

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

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

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

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

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

解决方法

相关文章