flex-grow 控制剩余空间的分配权重而非百分比，只在父容器有剩余空间时生效；其值为无单位数字，按相对比例分配，需配合 flex-basis 使用，常见失效原因是父元素未设 display: flex 或子元素被 min-width 锁死。
flex-grow 怎么让元素按比例占满剩余空间
直接说结论：flex-grow 控制的是「剩余空间的分配权重」，不是百分比，也不是固定宽度。它只在父容器有剩余空间时起作用——如果所有子项加起来已经撑满或超出容器，flex-grow 就完全不生效。
常见错误是写成 flex-grow: 50 想占 50%，结果发现没反应。其实它只接受无单位数字，值为 0、1、2、0.5 都合法，但比较的是相对比例。
-
flex-grow: 0（默认值）：不参与剩余空间分配 -
flex-grow: 1和flex-grow: 2：后者分到的空间是前者的两倍 -
flex-grow: 1和flex-grow: 1：平分剩余空间 -
flex-grow: 1和flex-grow: 0：前者拿走全部剩余空间，后者宽度不变
为什么设置了 flex-grow 还是没变宽
大概率是父容器没设 display: flex，或者子元素本身有 width/min-width 卡死了尺寸。更隐蔽的情况是：子元素内容过长触发了最小宽度保护（比如文字不换行），导致无法收缩，也就没“剩余空间”可分。
检查顺序建议：
立即学习“前端免费学习笔记（深入）”；
- 确认父元素有
display: flex且没设flex-wrap: wrap导致换行后逻辑变化 - 用浏览器开发者工具看子元素 computed width，是否被
min-width: auto（内容撑开）锁死 - 临时加
min-width: 0或overflow: hidden看是否松动——这是最常被忽略的兼容性补丁
flex-grow 和 flex-basis 的配合关系
flex-grow 不是独立工作的。它的计算起点是 flex-basis（默认为 auto，即内容宽度）。也就是说：先按 flex-basis 排一遍，再把剩下的空间按 flex-grow 权重分。
典型陷阱：
-
flex-basis: 200px+flex-grow: 1：先给 200px，再分剩余空间 -
flex-basis: 0+flex-grow: 1：相当于“从零开始按权重分”，这才是真正按比例均分的写法 -
flex: 1是简写，等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%（注意：不是0px，是0%，但多数浏览器当作0px处理）
在响应式布局里 flex-grow 容易出问题的地方
当容器宽度动态变化（比如窗口缩放、移动端横竖屏切换），flex-grow 会重新计算，但若子元素内嵌了固定宽的图片、iframe 或第三方组件，它们可能拒绝收缩，导致布局错乱或横向滚动条意外出现。
实操建议：
- 对内部不可控内容（如
<img alt="CSS怎样控制flex布局中的元素占比_使用flex-grow分配剩余空间" >）强制加max-width: 100%; height: auto - 避免在
flex-grow元素上同时设width，二者冲突时以flex-basis为准，width可能被忽略 - 移动端慎用
flex-grow配合font-size: large类样式，大字号可能让文字撑出预期宽度，破坏比例
真正难调的从来不是 flex-grow 本身，而是它和内容尺寸、盒模型、文本渲染之间的隐式耦合。多看 computed 样式，少猜。
