但是从上面的行开始的第二个 10px 边距会影响第 4 行的布局吗?第 4 行的对齐方式关闭的原因是第 4 行的边距比其他行少一个,这意味着第 4 行的可用空间比其他行多 10px.您会注意到,如果您删除边距规则,您将获得所需的对齐方式..numbers {显示:弹性;弹性方向:列;}.排 {显示:弹性;弹性方向:行;弹性增长:1;对齐内容:间隔;}.按钮 {显示:弹性;弹性增长:1;对齐内容:居中;对齐项目:居中;/* 边距:5px;*/边框半径:5px;边框:1px纯灰色;背景:rgba(255, 255, 255, 0.2);光标:指针;}.button#number0 {弹性增长:2;}.button#冒号{弹性增长:1;}<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 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 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 class="row"><div class="button number" id="number0">0</div><div class="button" id="colon">:</div>那么第四行到第二个 10px 边距会发生什么? 它被两个弹性项目吸收了.以下是 flex-grow 在第四行分配额外空间的方式:左侧的 Flex 项目(内容为0")具有 flex-grow: 2.(.button#number0 在您的代码中.)Flex 项目右侧(内容为:")具有 flex-grow: 1.(.button#colon 在您的代码中.)第二个项目间边距仅出现在包含三个 flex 项目的行上,宽度为 10 像素.(代码说每个项目周围 5px,但在CSS 水平边距从不崩溃.此外,在 flexbox 中,没有边距崩溃.)flex-grow 值的总和是三个.那么让我们将 10px 除以 3.现在我们知道 1 的比例是 3.33px.因此,flex item left 获得 6.66px 的额外空间,flex item right 获得 3.33px.假设左边的 flex item 有 flex-grow: 3 代替.那么左边的 flex item 会得到 7.5px,右边的 flex item 会得到 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 {显示:弹性;弹性方向:列;}.排 {显示:弹性;弹性方向:行;弹性增长:1;对齐内容:间隔;}.按钮 {显示:弹性;弹性基础:33.33%;对齐内容:居中;对齐项目:居中;边距:5px;边框半径:5px;边框:1px纯灰色;背景:rgba(255, 255, 255, 0.2);光标:指针;}#number0 { flex-basis: calc(66.67% + 10px);}* { box-sizing: border-box;}<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 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 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 class="row"><div class="button number" id="number0">0</div><div class="button" id="colon">:</div>jsFiddle 演示参考文献:flex-grow 定义 ~ MDNflex-basis 定义 ~ MDN7.2 灵活性组件 ~ W3C额外:CSS 网格解决方案随着 CSS Grid 的出现,整个布局的代码可以大大简化..numbers {显示:网格;网格模板列:重复(自动填充,最小最大值(26%,1fr));网格间距:10px;}#number0 {网格列:跨度 2;}/* 非必要的装饰风格 */.按钮 {显示:弹性;对齐内容:居中;对齐项目:居中;边框半径:5px;边框:1px纯灰色;}<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 class="button number" id="number4">4</div><div class="button number" id="number5">5</div><div class="button number" id="number6">6</div><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 class="button number" id="number0">0</div><div class="button" id="colon">:</div>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/ 解决方案 Short AnalysisThe problem is that rows 1-3 have two horizontal margins and row 4 only has one.With horizontal margins at 10px each, row 4 has 10px more free space than the other rows. This throws off the alignment of the columns.Because flex-grow applies only to free space, and is heavily influenced by content and margins, it's not the most secure way to size flex items.Try flex-basis instead. Add this to your code:.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>Extended AnalysisYou wrote:The source of your problem is not the content inside the flex item.You wrote: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 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 1, 2 and 3 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.But where does the second 10px margin from the rows above factor into the layout of row 4?The reason the alignment is off on row 4 is that row 4 has one less margin than the other rows, meaning that row 4 has 10px more free space than the other rows.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.The last part of your question says:Because flex-grow applies only to free space, and is heavily influenced by content and margins, it's not the most secure way to size flex items.Try flex-basis instead. Add this to your code:.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>jsFiddle demoReferences:flex-grow definition ~ MDNflex-basis definition ~ MDN7.2 Components of Flexibility ~ W3CEXTRA: CSS GRID SOLUTIONWith the advent of CSS Grid, the code for this entire layout can be greatly simplified..numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(26%, 1fr)); grid-gap: 10px;}#number0 { grid-column: span 2;}/* non-essential decorative styles */.button { display: flex; justify-content: center; align-items: center; border-radius: 5px; border: 1px solid gray;}<div class="numbers"> <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 class="button number" id="number4">4</div> <div class="button number" id="number5">5</div> <div class="button number" id="number6">6</div> <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 class="button number" id="number0">0</div> <div class="button" id="colon">:</div></div> 这篇关于flex-grow 没有按预期调整弹性项目的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!