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

问题描述

我有3个div，如果我给 flex：0.5 给前两个div，最后的div应该移动到下一行，如果我给了 flex-wrap：wrap 。如果我错了，请纠正。

以下是我的html / css：

  .parent {display：flex; height：100px;背景颜色：红色; 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>  

请检查 JSFiddle 。

在此先感谢。

解决方案 flex-grow 属性用于在容器中分配可用空间。

不是 旨在直接或精确地确定弹性项目的大小。

从 spec ：
$ b

flex-grow ...确定Flex项目相对于Flex容器中其余Flex项目增长的相对
增长的积极空闲
空间是多少因此， flex-grow 不会强制项目换行。

这里是你的例子 flex-grow：1000 ： demo

使用 width 来定义一个flex项目的长度， height 或 flex-basis 。

---

解释 flex-grow：0.5

当您应用 flex：0.5 ，您使用 flex 速记属性来说明这一点：

• flex-grow：0.5


• flex-shrink：1


• 弹性基础：0





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

例如，如果容器是 width：600px 并且三个div的总宽度是450px，这会在自由空间留下150px（ demo ）。

如果每个项目都有 flex-grow：1 ，那么每个项目将占用额外空间的50px，并且每个项目将计算为 width：200px （ demo ）。

但是在你的代码中，有两个项目 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

b

$ b $ p

/ p>

  .parent {display：flex; flex-wrap：wrap; height：100px;背景颜色：红色; width：600px;}。parent> div {flex-basis：150px;}。child-1 {flex：0.5; background-color：green;}。child-2 {flex：0.5;        > < 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>  

em>注意事项的真相是，因为div＃1和＃2具有相同的 flex-grow 因子，而div＃3具有因子0，因此价值是无关紧要的。你可以用任何数字代替0.5。只要它们在两个div中相同，这些项目就会计算为225px，因为比例将是相同的。

更多信息：

• flex-grow不按预期大小调整项目的大小 a>


• 如何让flexbox在计算中包含填充？


• flex-basis和width之间有什么区别？

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屋！