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

问题描述

在 mdn 中

• flex：1

的含义与

• flex-grow：1 / li>
  

但是，其实它在浏览器中有不同的显示。

在这个 jsFiddle 中通过改变CSS中的注释尝试它。

当我使用 flex：1 时，classname为 test-container 的元素将会是 height：100％但是在使用 flex-grow：1 时不会发生。 b $ b

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

.flex-1 {display：flex; flex-direction：column;身高：500px; background：red;}。child-1 {height：50px;背景：blue;}。child-2 {flex-grow：1; / * flex：1; * / background：green;}。test-container {display：flex; flex-direction：row;背景：白色; } < div class = FLEX-1\" > < div class =child-1>< / div> < div class =child-2> < div class =test-container>< / div> < / div>< / div>

解决方案

flex





flex 属性是快速设置：


$ li $ flex-grow

flex-shrink

flex-basis

$ b $ flex：1 规则应该计算为：

• flex-grow：1


• flex-shrink：1


• flex-basis：0

这些值是在规范中定义的。请参阅 7.1.1节。基本值 flex

我说应该计算因为在IE11和其他可能的浏览器中，一个度量单位（例如 px 或％）被附加到 0 flex-basis 中的值。这可以有所作为（示例）。

---

flex-grow

flex-grow 属性（分配可用空间容器当中的Flex项目），当它自己声明时，在它们的初始值处留下 flex-shrink 和 flex-basis 。所以，当你设置 flex-grow：1 ，浏览器就会呈现这个：

$ b $

b

• flex-grow：1 （会覆盖默认值，即0 ）
  
• flex-shrink：1 （


• flex-basis：auto （这是默认值）
  
ul>



---





flex：1 和最终， flex：1 和之间的区别在于：

code> flex-grow：1 是前者设置 flex-basis：0 ，后者保留默认 flex-basis：auto 。




有关 flex-basis：0之间区别的完整说明和 flex-basis：auto 看到这个帖子：




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






---





您的代码示例





您在代码中看到不同的原因是 flex-basis 控制列方向容器中的高度。





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





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





height：100％在flex项目的子项中被忽略，因为它没有被正确应用，这些帖子：




• 使用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屋！