flex：1和flex之间的区别
在mdn
flex:1 意味着相同
flex-grow:1 。 但是，其实它在浏览器中有不同的表现。
你可以在这个jsFiddle中通过改变CSS中的注释来尝试它。
当我使用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属性是设置的简写：
flex-grow flex-shrink flex-basis flex: 1规则应该计算为：
flex-grow: 1 flex-shrink: 1 flex-basis: 0 这些值在规范中定义。 参见7.1.1节。 flex基本价值
我说“应该计算”，因为在IE11和其他浏览器中，一个度量单位（如px或%以flex-basis附加到0值。 这可以有所作为（例如）。
flex-grow
flex-grow属性（在Flex容器中分配容器中的自由空间）在自行声明时，会将flex-shrink和flex-basis作为初始值。
因此，当您设置flex-grow: 1 ，浏览器将呈现以下内容：
flex-grow: 1 （覆盖默认值，即0） flex-shrink: 1 （这是默认值） flex-basis: auto （这是默认值） flex: 1和flex-grow: 1之间的区别flex-grow: 1
最终， flex: 1和flex-grow: 1之间的区别在于前者设置了flex-basis: 0 ，而后者保留默认的flex-basis: auto 。
有关flex-basis: 0和flex-basis: auto之间区别的完整说明flex-basis: auto请参阅此帖：
你的代码示例
你在代码中看到不同的原因是flex-basis控制列方向容器的高度。
在Chrome中，使用flex-basis: auto ，元素的高度为450px（500px父 - 50px标题）。 换句话说， flex-grow可以自由分配空闲空间。
使用flex-basis: 0 ，元素的高度为0， flex-grow没有可分配的空间。
Flex项目的子项上的height: 100%因为没有正确应用而被忽略，正如这些帖子中所解释的：
height属性和百分比值 在阅读上面的帖子时，您还将了解为什么您的代码在Firefox，Safari，Edge和IE中呈现不同的效果。
我明白为什么会发生这种情况。 事实上
flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%
关键是flex-basis:0% 。 如果您使用flex-grow:1 ，则flex-basis将为auto。 在这个解答中，你不能让height:100%工作。
但我不确定何时
flex:1 === flex-grow:1;flex-shrink:1;flex-basis:0%
会发生。 在文档中
flex:1 ！== flex-grow:1;flex-shrink:1;flex-basis:0%