flex-grow不按预期调整flex项目大小 [英] flex-grow not sizing flex items as expected

问题描述

看起来flex div中的内容会影响它的计算大小，涉及 flex-grow 属性。我做错了什么？

在下面提供的小提琴中，您会看到一个数字键盘。所有行包含3个数字，底行除外。那行应该有2个数字的宽度，因此 flex-grow：2 和'：'（冒号）是1个数字的大小，因此 flex-grow：1 。

我缺少这里的东西吗？

0的右侧应与其上方的8,5和2对齐。这有点儿。

  .numbers {display：flex; flex-direction：column;}。row {display：flex; flex-direction：row; flex-grow：1; justify-content：space-between;}。button {display：flex; flex-grow：1; justify-content：center; align-items：center; margin：5px; border-radius：5px; border：1px solid gray; background：rgba（255，255，255，0.2）; cursor：pointer;}。button＃number0 {flex-grow：2;} button＃colon {flex-grow：1;}   < div class =numbers> < div class =row> < div class =button numberid =number1> 1< / div> < div class =button numberid =number2> 2< / div> < div class =button numberid =number3> 3< / div> < / div> < div class =row> < div class =button numberid =number4> 4< / div> < div class =button numberid =number5> 5< / div> < div class =button numberid =number6> 6< / div> < / div> < div class =row> < div class =button numberid =number7> 7< / div> < div class =button numberid =number8> 8< / div> < div class =button numberid =number9> 9< / div> < / div> < div class =row> < div class =button numberid =number0> 0< / div> < div class =buttonid =colon>：< / div> < / div>< / div>  

第四行关闭对齐的原因是因为它只有一个10px的边距。

您会注意到，如果您删除保证金

  .numbers {display：flex; flex-direction：column;}。row {display：flex; flex-direction：row; flex-grow：1; justify-content：space-between;}。button {display：flex; flex-grow：1; justify-content：center; align-items：center; / * margin：5px; * / border-radius：5px; border：1px solid gray; background：rgba（255，255，255，0.2）; cursor：pointer;}。button＃number0 {flex-grow：2;} button＃colon {flex-grow：1;}   < div class =numbers> < div class =row> < div class =button numberid =number1> 1< / div> < div class =button numberid =number2> 2< / div> < div class =button numberid =number3> 3< / div> < / div> < div class =row> < div class =button numberid =number4> 4< / div> < div class =button numberid =number5> 5< / div> < div class =button numberid =number6> 6< / div> < / div> < div class =row> < div class =button numberid =number7> 7< / div> < div class =button numberid =number8> 8< / div> < div class =button numberid =number9> 9< / div> < / div> < div class =row> < div class =button numberid =number0> 0< / div> < div class =buttonid =colon>：< / div> < / div>< / div>  

---

那么第四行到第二个10px margin会发生什么呢？

。

下面是 flex-grow 如何在第四行分配额外的空间： / p>

• Flex项目左侧（内容为0）具有 flex-grow：2 。 （ .button＃number0 在代码中。）


• Flex项目右（内容：）具有 flex-grow：1 。 （ .button＃colon 在代码中。）


• 第二个项目间边距， ，是10px宽。 （代码为每个项目5px，但在
  CSS 水平边距永不
  collapse 。
  此外，在flexbox中，无边距
  collapse ）


• flex-grow 值的总和为三。现在我们知道1的比例是3.33px。


• 因此，flex item left获得6.66px的额外空间，flex item right获取3.33px


• 让我们说flex项目中有 flex-grow：3 。然后，左边的flex项目将获得7.5px，右边的flex项目将获得2.5px。

---

b
$ b

问题的最后一部分说：

'0'与其上的8,5和2对齐。

因为 flex-grow 没有直接参与

请尝试使用 flex-basis 。这似乎有效：

  .button {flex-basis：33.33％; } 
＃number0 {flex-basis：calc（66.67％+ 10px）; } 
  

  .numbers {display：flex; flex-direction：column;}。row {display：flex; flex-direction：row; flex-grow：1; justify-content：space-between;}。button {display：flex;柔性：33.33％; justify-content：center; align-items：center; margin：5px; border-radius：5px; border：1px solid gray; background：rgba（255，255，255，0.2）; cursor：pointer;}＃number0 {flex-basis：calc（66.67％+ 10px）;}  

 < div class =numbers> < div class =row> < div class =button numberid =number1> 1< / div> < div class =button numberid =number2> 2< / div> < div class =button numberid =number3> 3< / div> < / div> < div class =row> < div class =button numberid =number4> 4< / div> < div class =button numberid =number5> 5< / div> < div class =button numberid =number6> 6< / div> < / div> < div class =row> < div class =button numberid =number7> 7< / div> < div class =button numberid =number8> 8< / div> < div class =button numberid =number9> 9< / div> < / div> < div class =row> < div class =button numberid =number0> 0< / div> < div class =buttonid =colon>：< / div> < / div>< / div>  

---

UPDATE

为了回应评论中的意见，我对上述代码进行了调整。通过添加 box-sizing：border-box ，可以更正1-2px未对齐。

 code> .button {flex-basis：33.33％; box-sizing：border-box} 
＃number0 {flex-basis：calc（66.67％+ 10px）; } 
  

  .numbers {display：flex; flex-direction：column;}。row {display：flex; flex-direction：row; flex-grow：1; justify-content：space-between;}。button {display：flex;柔性：33.33％; justify-content：center; align-items：center; margin：5px; border-radius：5px; border：1px solid gray; background：rgba（255，255，255，0.2）; cursor：pointer; box-sizing：border-box;}＃number0 {flex-basis：calc（66.67％+ 10px）;}  

 < div class =numbers> < div class =row> < div class =button numberid =number1> 1< / div> < div class =button numberid =number2> 2< / div> < div class =button numberid =number3> 3< / div> < / div> < div class =" row"> < div class =button numberid =number4> 4< / div> < div class =button numberid =number5> 5< / div> < div class =button numberid =number6> 6< / div> < / div> < div class =row> < div class =button numberid =number7> 7< / div> < div class =button numberid =number8> 8< / div> < div class =button numberid =number9> 9< / div> < / div> < div class =row> < div class =button numberid =number0> 0< / div> < div class =buttonid =colon>：< / div> < / div>< / div>  

JSFIDDLE

---

参考文献：

• flex-growth 定义〜MDN


• flex-basis 定义〜MDN


• 7.2灵活性组件〜W3C

It seems that the content inside a flex div affects its calculated size concerning the flex-grow property. Am I doing something wrong?

In the fiddle provided below, you'll see a number pad. All the rows contain 3 numbers except the bottom row. That row should have the '0' be the width of 2 numbers, hence flex-grow: 2 and the ':' (colon) be the size of 1 number, hence flex-grow: 1.

Am I missing something here?

The right side of the '0' should be aligned with the 8, 5, and 2 above it. It's a bit off.

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

https://jsfiddle.net/0r4hemdu/

解决方案

It seems that the content inside a flex div affects its calculated size concerning the flex-grow property. Am I doing something wrong?

The source of your problem is not the content inside the flex item.

In the fiddle provided below, you'll see a number pad. All the rows contain 3 numbers except the bottom row. That row should have the '0' be the width of 2 numbers, hence flex-grow: 2 and the ':' be the size of 1 number, hence flex-grow: 1. Am I missing something here?

Yes. Your interpretation of the flex-grow property is incorrect. flex-grow is not intended for defining the size of a flex item. Its job is to distribute free space in the flex container among flex items.

By applying flex-grow: 1 to a group of flex items, you are telling them to distribute free space evenly among themselves. This is why, in your demo, rows one, two and three have equally sized flex items.

When you apply flex-grow: 2, you are telling the flex item to consume twice as much free space as items with flex-grow: 1. This does not necessarily mean the flex item will be twice the size.

Also, in your case, even if flex-grow: 2 did mean twice the size, how would it know to include that second 10px margin from the rows above to its width calculation (which would be necessary to achieve the alignment you want)?

The reason the alignment is off on row four is because it has only one 10px margin.

You'll notice that if you remove the margin rule you get your desired alignment.

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    /* margin: 5px; */
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.button#number0 {
    flex-grow: 2;
}

.button#colon {
    flex-grow: 1;
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

---

So what happens on row four to that second 10px margin?

It gets absorbed by the two flex items.

Here's how flex-grow distributes the extra space on row four:

• Flex item left (with content "0") has flex-grow: 2. (.button#number0 in the code.)
• Flex item right (with content ":") has flex-grow: 1. (.button#colon in the code.)
• The second inter-item margin, which appears only on rows with three flex items, is 10px wide. (The code says 5px around each item, but in CSS horizontal margins never collapse. Moreover, in flexbox, no margins collapse.)
• The sum total of the flex-grow values is three. So let's divide 10px by 3. Now we know that the proportion of 1 is 3.33px.
• Hence, flex item left gets 6.66px of the extra space, and flex item right gets 3.33px.
• Let's say that flex item left had flex-grow: 3 instead. Then flex item left would get 7.5px, and flex item right would get 2.5px.

---

The last part of your question says:

The right side of the '0' should be aligned with the 8, 5, and 2 above it. It's a bit off.

Because flex-grow is not directly involved in sizing flex items, you'll need another method.

Try flex-basis instead. This seems to work:

.button    { flex-basis: 33.33%; }
#number0   { flex-basis: calc(66.67% + 10px); }

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

---

UPDATE

In response to feedback in the comments, I've made an adjustment to the code above. By adding box-sizing: border-box, a 1-2px misalignment is corrected.

.button    { flex-basis: 33.33%; box-sizing: border-box }
#number0   { flex-basis: calc(66.67% + 10px); }

.numbers {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
}

.button {
    display: flex;
    flex-basis: 33.33%;
    justify-content: center;
    align-items: center;
    margin: 5px;
    border-radius: 5px;
    border: 1px solid gray;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-sizing: border-box;
}

#number0 {
    flex-basis: calc(66.67% + 10px);
}

<div class="numbers">
    <div class="row">
        <div class="button number" id="number1">1</div>
        <div class="button number" id="number2">2</div>
        <div class="button number" id="number3">3</div>
    </div>
    <div class="row">
        <div class="button number" id="number4">4</div>
        <div class="button number" id="number5">5</div>
        <div class="button number" id="number6">6</div>
    </div>
    <div class="row">
        <div class="button number" id="number7">7</div>
        <div class="button number" id="number8">8</div>
        <div class="button number" id="number9">9</div>
    </div>
    <div class="row">
        <div class="button number" id="number0">0</div>
        <div class="button" id="colon">:</div>
    </div>
</div>

JSFIDDLE

---

References:

• flex-grow definition ~ MDN
• flex-basis definition ~ MDN
• 7.2 Components of Flexibility ~ W3C

这篇关于flex-grow不按预期调整flex项目大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！