简短分析
问题在于，第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 > <div > <div id="number1">1</div> <div id="number2">2</div> <div id="number3">3</div> </div> <div > <div id="number4">4</div> <div id="number5">5</div> <div id="number6">6</div> </div> <div > <div id="number7">7</div> <div id="number8">8</div> <div id="number9">9</div> </div> <div > <div id="number0">0</div> <div 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; 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 > <div > <div id="number1">1</div> <div id="number2">2</div> <div id="number3">3</div> </div> <div > <div id="number4">4</div> <div id="number5">5</div> <div id="number6">6</div> </div> <div > <div id="number7">7</div> <div id="number8">8</div> <div id="number9">9</div> </div> <div > <div id="number0">0</div> <div 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 > <div > <div id="number1">1</div> <div id="number2">2</div> <div id="number3">3</div> </div> <div > <div id="number4">4</div> <div id="number5">5</div> <div id="number6">6</div> </div> <div > <div id="number7">7</div> <div id="number8">8</div> <div id="number9">9</div> </div> <div > <div id="number0">0</div> <div id="colon">:</div> </div></div>
