flex:1 和 flex-grow:1 的区别 [英] The difference between flex:1 and flex-grow:1

问题描述

在 mdn

• flex:1

意思相同

• flex-grow:1.

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

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

当我使用 flex: 1 时，类名是 test-container 的元素将是 height:100% 但它不会发生当你使用 flex-grow: 1.

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

.flex-1 {显示:弹性；弹性方向:列；高度:500px；背景:红色；}.child-1 {高度:50px；背景:蓝色；}.child-2 {弹性增长:1；/* 弹性:1;*/背景:绿色；}.test-容器{显示:弹性；弹性方向:行；背景:白色；高度:100%；}

<div class="child-1"></div><div class="child-2"><div class="test-container"></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-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: 0 和flex-basis: auto 之间区别的完整说明，请参阅此帖子:

• 根据原始大小制作 flex-grow 展开项

<小时>

您的代码示例

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

在 Chrome 中，使用 flex-basis: auto，元素的高度为 450 像素(500 像素父 - 50 像素标题).换句话说，flex-grow 可以自由分配空闲空间.

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

弹性项目子项上的 height: 100% 被简单地忽略，因为它没有被正确应用，如这些帖子中所述:

• 使用 CSS height 属性和百分比值
• Chrome/Safari 未填充 Flex 父级的 100% 高度

通过阅读以上帖子，您还将了解为什么您的代码在 Firefox、Safari、Edge 和 IE 中的呈现方式不同.

In mdn

• flex:1

means the same as

• flex-grow:1.

However, in fact it has different show in browser.

You can try it in this jsFiddle by changing the comment in css.

When I use flex: 1 the element who's classname is test-container will be height:100% but it won't happen when you use flex-grow: 1.

I don't understand why. Looking for some help. Thanks very much.

.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

The flex property is a shorthand for setting:

• flex-grow
• flex-shrink
• flex-basis

The flex: 1 rule is supposed to compute to this:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

These values are defined in the spec. See section 7.1.1. Basic Values of flex

I say "supposed to compute" because, in IE11 and possibly other browsers, a unit of measure, such as px or %, is appended to the 0 value in flex-basis. This can make a difference (example).

---

flex-grow

The flex-grow property (which distributes free space in the container among flex items), when declared by itself, leaves flex-shrink and flex-basis at their initial values.

So when you set flex-grow: 1, the browser renders this:

• 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)

---

The difference between flex: 1 and flex-grow: 1

Ultimately, the difference between flex: 1 and flex-grow: 1 is that the former sets flex-basis: 0, and the latter keeps the default flex-basis: auto.

For a complete explanation of the difference between flex-basis: 0 and flex-basis: auto see this post:

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

---

Your code example

The reason you're seeing a difference in your code is that flex-basis controls height in a column-direction container.

In Chrome, with flex-basis: auto, the height of the element is 450px (500px parent - 50px header). In other words, flex-grow is free to distribute the free space.

With flex-basis: 0, the height of the element is 0, and flex-grow has no free space to distribute.

The height: 100% on the child of the flex item is simply ignored because it isn't being applied properly, as explained in these posts:

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

In reading the posts above you'll also understand why your code renders differently in Firefox, Safari, Edge and IE.

这篇关于flex:1 和 flex-grow:1 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！