flex-grow未按预期调整flex项目的大小

Question

似乎flex div中的内容会影响有关flex-grow属性的计算大小。难道我做错了什么？

在下面提供的小提琴中，您将看到一个数字键盘。除底行外，所有行均包含3个数字。该行应将“ 0”表示为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 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>

Answer 1

简短分析
问题在于，第1-3行有两个水平边距，而第4行只有一个水平边距。

如果水平边距各为10px，则第4行的可用空间比其他行多10px。这引发了列的对齐。

因为flex-grow仅适用于自由空间，并且受内容和边距的很大影响，所以这不是确定伸缩项目大小的最安全方法。

试试吧flex-basis。将此添加到您的代码：

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

.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); }
*          { box-sizing: border-box; }

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

扩展分析
你写了：

似乎flex div中的内容会影响有关flex-grow属性的计算大小。难道我做错了什么？

问题的根源不是弹性项目中的内容。

你写了：

在下面提供的小提琴中，您将看到一个数字键盘。除底行外，所有行均包含3个数字。该行的‘0’是2个数字的宽度，因此flex-grow: 2’：’是1个数字的大小，因此flex-grow: 1。我在这里想念什么吗？

是。您对flex-grow财产的解释不正确。flex-grow不用于定义弹性项目的大小。它的工作是在flex容器中的各个项目之间分配可用空间。

通过应用flex-grow: 1一组弹性物料，您可以告诉它们在它们之间平均分配可用空间。这就是为什么在您的演示中，行1，行2和行3具有相同大小的弹性项目。

当您申请时flex-grow: 2，您要告诉flex项消耗的可用空间是的项的两倍flex-grow: 1。

但是，以上各行的第二个10px边距在第4行的布局中位于何处？

在此处输入图片说明

第4行未对齐的原因是，第4行的边距比其他行少一个，这意味着第4行的可用空间比其他行多10像素。

您会注意到，如果删除边距规则，则会得到所需的对齐方式。

.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>

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

它被两个弹性项目吸收。

这是flex-grow在第四行分配额外空间的方式：

• 剩余的弹性项目（内容为“ 0”）具有flex-grow: 2。（.button#number0在您的代码中。）
• 弹性项目权利（内容为“：”）具有flex-grow: 1。（.button#colon在您的代码中。）
• 第二个项目间边距仅出现在具有三个弹性项目的行上，宽度为10px。（代码说每个项目周围有5px，但在CSS中，水平边距永远不会塌陷。此外，在flexbox中，没有边距塌陷。）
• 这些flex-grow值的总和为3。因此，让我们将10px除以3。现在我们知道1的比例是3.33px。
• 因此，弹性项目左侧获得6.66px的额外空间，而弹性项目右侧获得3.33px。
• 假设剩下的flex项flex-grow: 3改为。然后，弹性项目左侧将获得7.5px，而弹性项目右侧将获得2.5px。
  您问题的最后一部分说：
  

“ 0”的右侧应与其上方的8、5和2对齐。有点不对劲

因为flex-grow仅适用于自由空间，并且受内容和边距的很大影响，所以这不是确定伸缩项目大小的最安全方法。

试试吧flex-basis。将此添加到您的代码：

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

.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); }
*          { box-sizing: border-box; }

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