Flex-按预期增长，而不是调整FLEX项目的大小。

Question

Flex-按预期增长，而不是调整FLEX项目的大小。

看起来，Flexdiv中的内容会影响到它的计算大小。flex-grow财产。我做错什么了吗？

在下面提供的小提琴中，你会看到一个数字垫。除底部行外，所有行都包含3个数字。该行的“0”应为两个数字的宽度，因此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>

https://jsfiddle.net/0r4hemdu/

Answer 1

短分析问题是，第1-3行有两个水平边距，第4行只有一个。在水平边距为10 px的情况下，第4行的空闲空间比其他行多10 px。这就抛出了列的对齐。因为flex-grow仅适用于空闲空间，并且受内容和页边距的严重影响，它并不是最安全的大小弹性项目的方法。试一试flex-basis相反。将此添加到代码中：.button&nbsp; &nbsp; { flex-basis: 33.33%; }#number0&nbsp; &nbsp;{ flex-basis: calc(66.67% + 10px); }*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { box-sizing: border-box; }.numbers&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;column;}.row&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;row; &nbsp;&nbsp;&nbsp;&nbsp;flex-grow:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;space-between;}.button&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-basis:&nbsp;33.33%; &nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;gray; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.2); &nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer;}#number0&nbsp;&nbsp;&nbsp;{&nbsp;flex-basis:&nbsp;calc(66.67%&nbsp;+&nbsp;10px);&nbsp;}*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;box-sizing:&nbsp;border-box;&nbsp;}<div&nbsp;class="numbers"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number1">1</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number2">2</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number3">3</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number4">4</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number5">5</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number6">6</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number7">7</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number8">8</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number9">9</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number0">0</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button"&nbsp;id="colon">:</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>扩展分析你写道：看起来，Flexdiv中的内容会影响到它的计算大小。flex-grow财产。我做错什么了吗？问题的根源不是FLEX项目中的内容。你写道：在下面提供的小提琴中，你会看到一个数字垫。除底部行外，所有行都包含3个数字。该行的“0”应为两个数字的宽度，因此flex-grow: 2和“：”是一个数字的大小，因此flex-grow: 1..我是不是漏掉了什么？是。你对flex-grow属性不正确。flex-grow不用于定义FLEX项的大小。它的工作是在各个项目之间分配Flx容器中的空闲空间。通过应用flex-grow: 1对于一组Flx项目，您告诉它们在它们之间平均分配空闲空间。这就是为什么在您的演示中，第1行、第2行和第3行具有相同大小的Flex项目。当你申请flex-grow: 2，您正在告诉Flex项消耗的空闲空间是以下项的两倍flex-grow: 1.但是，从上述因素到第4行布局的第二个10 px边距在哪里？在第4行上取消对齐的原因是，第4行的空隙比其他行少一个，这意味着第4行的空闲空间比其他行多10 px。你会注意到如果你删除保证金规则你得到了你想要的对齐。.numbers&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;column;}.row&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;row; &nbsp;&nbsp;&nbsp;&nbsp;flex-grow:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;space-between;}.button&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-grow:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;margin:&nbsp;5px;&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;gray; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.2); &nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer;}.button#number0&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;flex-grow:&nbsp;2;}.button#colon&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;flex-grow:&nbsp;1;}<div&nbsp;class="numbers"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number1">1</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number2">2</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number3">3</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number4">4</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number5">5</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number6">6</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number7">7</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number8">8</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number9">9</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number0">0</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button"&nbsp;id="colon">:</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>那么，第四行到第二行10%的保证金又会发生什么呢？它会被这两个挠性物品吸收。以下是如何flex-grow分配第四行的额外空间：保留的Flex项(内容为“0”)flex-grow: 2. (.button#number0(在您的代码中。)Flex项目权限(内容为“：”)flex-grow: 1. (.button#colon(在您的代码中。)第二个项间边距仅出现在包含三个FLEX项的行上，宽度为10 px。(代码在每个项目周围显示5 px，但在css中水平边缘永不塌陷..此外，在柔性箱中，无边缘塌陷.)的总和flex-grow价值是三。让我们除以10 px乘以3，现在我们知道1的比例是3.33px。因此，左边的Flex项获得6.66px的额外空间，而Flex Item右侧的额外空间为3.33px。假设剩下的柔韧物品flex-grow: 3相反。然后，左边的FLEX项将得到7.5px，而FLEX项的右侧将得到2.5px。你问题的最后一部分是：“0”的右侧应与其上方的8、5和2对齐。有点不对劲。因为flex-grow仅适用于空闲空间，并且受内容和页边距的严重影响，它并不是最安全的大小弹性项目的方法。试一试flex-basis相反。将此添加到代码中：.button&nbsp; &nbsp; { flex-basis: 33.33%; }#number0&nbsp; &nbsp;{ flex-basis: calc(66.67% + 10px); }*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; { box-sizing: border-box; }.numbers&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;column;}.row&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-direction:&nbsp;row; &nbsp;&nbsp;&nbsp;&nbsp;flex-grow:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;space-between;}.button&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;&nbsp;&nbsp;flex-basis:&nbsp;33.33%; &nbsp;&nbsp;&nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;border-radius:&nbsp;5px; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;gray; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;rgba(255,&nbsp;255,&nbsp;255,&nbsp;0.2); &nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer;}#number0&nbsp;&nbsp;&nbsp;{&nbsp;flex-basis:&nbsp;calc(66.67%&nbsp;+&nbsp;10px);&nbsp;}*&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;box-sizing:&nbsp;border-box;&nbsp;}<div&nbsp;class="numbers"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number1">1</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number2">2</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number3">3</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number4">4</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number5">5</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number6">6</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number7">7</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number8">8</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number9">9</div> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="row"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number0">0</div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="button"&nbsp;id="colon">:</div> &nbsp;&nbsp;&nbsp;&nbsp;</div></div>jsFiddle演示参考资料：flex-grow定义~MDNflex-basis定义~MDN7.2灵活性的组成部分~W3C额外：CSS网格解决方案随着CSS网格的出现，整个布局的代码可以大大简化。.numbers&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;repeat(auto-fill,&nbsp;minmax(26%,&nbsp;1fr)); &nbsp;&nbsp;grid-gap:&nbsp;10px;}#number0&nbsp;{ &nbsp;&nbsp;grid-column:&nbsp;span&nbsp;2;}/*&nbsp;non-essential&nbsp;decorative&nbsp;styles&nbsp;*/.button&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;justify-content:&nbsp;center; &nbsp;&nbsp;align-items:&nbsp;center; &nbsp;&nbsp;border-radius:&nbsp;5px; &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;gray;}<div&nbsp;class="numbers"> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number1">1</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number2">2</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number3">3</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number4">4</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number5">5</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number6">6</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number7">7</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number8">8</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number9">9</div> &nbsp;&nbsp;<div&nbsp;class="button&nbsp;number"&nbsp;id="number0">0</div> &nbsp;&nbsp;<div&nbsp;class="button"&nbsp;id="colon">:</div></div>

Answer 2

我认为迈克尔·B说的一切都是正确的。只有解决办法有点尴尬。我个人不喜欢卡卡。只是感觉不对劲。你遇到的问题是一个更普遍的问题。你把太多的责任放在一个元素上。在这种情况下，.button班级，等级。弹性和保证金与弹性增长是太多的责任。试着把它拆开。它意味着更多的DOM元素，但它为您节省了很多痛苦。.numbers {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; max-width: 200px;&nbsp; margin: 0 auto;}.row {&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; flex-grow: 1;&nbsp; justify-content: space-between;}.row > .box {&nbsp; display: flex;&nbsp; flex-basis: 33.3333%;&nbsp; justify-content: center;&nbsp; align-items: center;}.row > .box.box-2 {&nbsp; flex-basis: 66.6667%;}.button {&nbsp; border-radius: 5px;&nbsp; border: 1px solid gray;&nbsp; background: rgba(255, 255, 255, 0.2);&nbsp; cursor: pointer;&nbsp; width: auto;&nbsp; text-align: center;&nbsp; margin: 5px;&nbsp; width: 100%;}<div class="numbers">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number1">1</div></div>&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number2">2</div></div>&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number3">3</div></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number4">4</div></div>&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number5">5</div></div>&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number6">6</div></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number7">7</div></div>&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number8">8</div></div>&nbsp; &nbsp; &nbsp; <div class="box"><div class="button number" id="number9">9</div></div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; <div class="box box-2"><div class="button number" id="number0">0</div></div>&nbsp; &nbsp; &nbsp; <div class="box"><div class="button" id="colon">:</div></div>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </div></div>