通过设置 flex-grow 和 flex-shrink 属性，可以精准控制 flex 子项在主轴方向上的空间分配比例。当容器有多余空间时，flex-grow 决定各子项如何瓜分剩余空间；当空间不足时，flex-shrink 决定各子项如何压缩自身尺寸。这两个属性的值是无单位的数字，默认情况下所有子项的 flex-grow 为 0（不增长），flex-shrink 为 1（等比缩小）。
flex-grow 如何按比例分配多余空间
当父容器宽度大于所有子项宽度之和时，多出的空间会按照 flex-grow 的比例进行分配。例如，若两个子项分别设置为 1 和 2，则总比例为 3，第一个子项获得剩余空间的 1/3，第二个子项获得 2/3。
div.container { display: flex; width: 600px; } div.item-a { flex-grow: 1; background: #ffcccc; } div.item-b { flex-grow: 2; background: #ccffcc; }
假设两个子项初始宽度均为 100px，总占用 200px，剩余 400px。item-a 增加 400 * (1/3) ≈ 133px，最终宽约 233px；item-b 增加 400 * (2/3) ≈ 267px，最终宽约 367px。
flex-shrink 如何处理空间不足时的压缩
当子项总宽度超过容器宽度时，子项会被压缩。默认的 flex-shrink: 1 意味着所有子项按原始尺寸等比例压缩。如果希望某个子项不被压缩或压缩较少，可以调整其 flex-shrink 值。值为 0 表示不压缩，保持原始尺寸；值越大，压缩越剧烈。
div.container { display: flex; width: 300px; } div.item-a { flex-shrink: 0; width: 150px; background: #ccccff; } div.item-b { flex-shrink: 1; width: 200px; background: #ffffcc; }
总需求宽度 350px，容器仅 300px，需压缩 50px。item-a 因 flex-shrink: 0 保持 150px 不变。item-b 承担全部 50px 压缩，最终宽度为 150px。若两者均为 1，则按 150:200 比例分担压缩量。
同时设置 flex-grow 和 flex-shrink 的具体效果
在实际布局中，通常同时设置这两个属性以应对不同屏幕尺寸。例如，设置 flex: 1 0 auto 表示允许增长、不允许收缩、基于内容宽度。若设置 flex: 0 1 auto 则表示不允许增长、允许收缩。这种组合能确保在空间充裕时扩展，空间紧张时优先压缩特定元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
