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

Question

在mdn

中

• flex:1

与

相同

• flex-grow:1。

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

您可以在jsFiddle中通过更改css中的评论来尝试。

当我使用flex: 1时，类别名为test-container的元素将为height:100%，但当您使用flex-grow: 1时，它将不会发生。< / p>

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

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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或%等度量单位会附加到{ {1}}中的{1}}值。这可以产生影响（example）。

0

flex-grow属性（在flex容器中分配容器中的可用空间），当它自己声明时，会将flex-basis和flex-grow保留为初始值。

因此，当您设置flex-shrink时，浏览器会显示以下内容：

• flex-basis（overrides the default value, which is 0）
• flex-grow: 1（this is the default value）
• flex-grow: 1（this is the default value）

flex-shrink: 1和flex-basis: auto

之间的差异

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

有关flex-basis: 0和flex-basis: auto之间区别的完整说明，请参阅此帖：

• Make flex-grow expand items based on their original size

您的代码示例

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

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

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

Flex项目的子项上的flex-basis: 0被忽略，因为它未正确应用，如以下帖子中所述：

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

在阅读上述帖子时，您也会理解为什么您的代码在Firefox，Safari，Edge和IE中的呈现方式不同。

Answer 2

我明白为什么会发生这种情况。事实上

flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%

关键是flex-basis:0%。如果您使用flex-grow:1，则flex-basis将为自动。在这种情况下，你不能让height:100%工作。

但是我不确定何时

flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%

会发生。在文档中

flex:1！== flex-grow:1;flex-shrink:1;flex-basis:0%