了解 flex-grow [英] Understanding flex-grow

问题描述

我有 3 个 div，如果我给前两个 div 设置 flex: 0.5，如果我给了 flex-wrap: wrap 最后一个 div 应该移动到下一行>.如有不对请指正.

以下是我的 html/css:

.parent {显示:弹性；高度:100px；背景颜色:红色；flex-wrap: 包裹;}.child-1 {背景颜色:绿色；弹性:0.5；}.child-2 {背景颜色:黄色；弹性:0.5；}.child-3 {背景颜色:粉红色；}

<div class="child-1">LOREN IPSUM LOREN IPSUM</div><div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div><div class="child-3">LOREN IPSUMLOREN IPSUM</div>

请检查 JSFiddle.

提前致谢.

解决方案

flex-grow 属性旨在在 flex 项之间分配容器中的可用空间.

它不用于直接或精确调整弹性项目的大小.

来自规范:

<块引用>

flex-grow ... 确定 flex item 将相对增长多少当正空闲时到 flex 容器中的其余 flex 项目空间分布.

因此，flex-grow 不会强制项目换行.这是您使用 flex-grow: 1000 的示例:演示

要定义弹性项目的长度，请使用 width、height 或 flex-basis.

<小时>

解释flex-grow: 0.5

当您应用 flex:0.5 时，您使用的是 flex 速记属性来表示:

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

flex-grow 组件代表一个比例.在这种情况下，它告诉 flex 项相对于其兄弟项的 flex-grow 因子消耗容器中可用空间的一半.

因此，例如，如果容器为 width: 600px 并且三个 div 的总宽度为 450px，这将留下 150px 的可用空间(演示).

如果每个 item 都有 flex-grow: 1，那么每个 item 将消耗 50px 的额外空间，每个 item 将计算为 width: 200px (演示).

但是在您的代码中，有两个项目具有 flex-grow: 0.5，最后一个项目具有 flex-grow: 0，所以它是如何分解的:

<块引用>

• div#1 将获得 75px(可用空间的一半)
• div#2 将获得 75px(可用空间的一半)
• div#3 将得到 0(因为它的 flex-grow 是 0)

这些是现在的计算值:

<块引用>

• div#1 = width: 225px
• div#2 = width: 225px
• div#3 = width: 150px

演示

.parent {显示:弹性；flex-wrap: 包裹;高度:100px；背景颜色:红色；宽度:600px；}.parent >div {弹性基础:150px；}.child-1 {弹性:0.5；背景颜色:绿色；}.child-2 {弹性:0.5；背景颜色:黄色；}.child-3 {背景颜色:粉红色；}

<div class="child-1">LOREN IPSUM LOREN IPSUM</div><div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div><div class="child-3">LOREN IPSUMLOREN IPSUM</div>

注意:事情的真相是，因为 div #1 和 #2 具有相同的 flex-grow 因子，而 div #3 的因子为 0，因此值为无关.您可以使用任何数字来替换 0.5.只要在两个 div 中相同，项目将计算为 225px，因为比例将相同.

更多信息:

• flex-grow 未按预期调整 flex 项目的大小
• 如何让 flexbox 在计算中包含填充?
• flex-basis 和宽度有什么区别?

I have 3 divs and if I give flex: 0.5 to first two divs, the last div should move to the next line if I have given flex-wrap: wrap. Please correct if I am wrong.

Following is my html / css:

.parent {
  display: flex;
  height: 100px;
  background-color: red;
  flex-wrap: wrap;
}
.child-1 {
  background-color: green;
  flex: 0.5;
}
.child-2 {
  background-color: yellow;
  flex: 0.5;
}
.child-3 {
  background-color: pink;
}

<div class="parent">
  <div class="child-1">LOREN IPSUM LOREN IPSUM</div>
  <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
  <div class="child-3">LOREN IPSUMLOREN IPSUM</div>
</div>

Please check JSFiddle for this.

Thanks in advance.

解决方案

The flex-grow property is designed to distribute free space in the container among flex items.

It is not intended for directly or precisely sizing flex items.

From the spec:

flex-grow ... determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed.

Hence, flex-grow will not force items to wrap. Here's your example with flex-grow: 1000: demo

To define a length of a flex item use width, height or flex-basis.

---

Explaining flex-grow: 0.5

When you apply flex:0.5, you're using the flex shorthand property to say this:

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

The flex-grow component represents a proportion. In this case, it's telling flex items to consume half of the available space in the container relative to the flex-grow factor of its siblings.

So, for instance, if the container were width: 600px and the total width of the three divs was 450px, this would leave 150px in free space (demo).

If each item had flex-grow: 1, then each item would consume 50px of the extra space, and each item would compute to width: 200px (demo).

But in your code, two items have flex-grow: 0.5, and the last item has flex-grow: 0, so here's how it breaks down:

• div#1 will get 75px (half of the available space)
• div#2 will get 75px (half of the available space)
• div#3 will get 0 (because its flex-grow is 0)

These are the computed values now:

• div#1 = width: 225px
• div#2 = width: 225px
• div#3 = width: 150px

demo

.parent {
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  background-color: red;
  width: 600px;
}

.parent > div {
  flex-basis: 150px;
}

.child-1 {
  flex: 0.5;
  background-color: green;
}

.child-2 {
  flex: 0.5;
  background-color: yellow;
}

.child-3 {
  background-color: pink;
}

<div class="parent">
  <div class="child-1">LOREN IPSUM LOREN IPSUM</div>
  <div class="child-2">LOREN IPSUMLOREN IPSUMLOREN IPSUM</div>
  <div class="child-3"> LOREN IPSUMLOREN IPSUM</div>
</div>

NOTE: The truth of the matter is, because divs #1 and #2 have the same flex-grow factor, and div #3 has a factor of 0, the value is irrelevant. You could use any number to replace 0.5. As long as it's the same in both divs, the items will compute to 225px, because the proportions will be the same.

More information:

• flex-grow not sizing flex items as expected
• How to get flexbox to include padding in calculations?
• What are the differences between flex-basis and width?

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