flex-grow在移动端不按预期缩放，根本原因是其仅作用于主轴剩余空间，而flex-basis默认auto、容器缺宽度约束、内容固有尺寸抗压缩等导致剩余空间为零或负值。
flex-grow 在移动端不是“按比例分总宽”，它只对容器主轴上的剩余空间生效；设错 flex-basis 或忽略内容固有尺寸，会导致权重完全失效。
为什么 flex-grow 在手机上经常“不按预期缩放”？
移动端常见问题不是 flex-grow 本身失效，而是它被其他属性压制或计算前提不成立：
-
flex-basis默认是auto，即按子元素内容宽度（比如一段长文本、一张未限制的<img alt="如何使用CSS3的flex-grow分配移动端剩余空间的权重？" >）作为基准 —— 这会让“剩余空间”直接变成负数或零，flex-grow完全不触发 - 父容器没设
width或max-width，尤其在position: fixed或body直接子元素中，flex 容器可能撑不满视口，导致剩余空间远小于预期 - 子项内含第三方组件（如地图 SDK、视频 iframe）、或设置了
white-space: nowrap的文字，它们拒绝收缩，flex-grow只能扩展，无法拉平布局
移动端真正按权重分配剩余空间的写法
关键不是调大 flex-grow 数值，而是先清空干扰项，让计算回归可控：
- 显式设
flex-basis: 0：抹掉内容原始宽度影响，让所有子项“从零开始按权重分剩余空间” - 用
flex: 1 0 0替代单独写flex-grow: 1：等价于flex-grow: 1; flex-shrink: 0; flex-basis: 0，避免意外压缩 - 对含图片/iframe 的子项加
min-width: 0：防止浏览器按固有尺寸撑开，这是 Safari 和旧版 Chrome 移动端的典型坑 - 强制内部媒体响应：
img, video { max-width: 100%; height: auto; }，否则flex-grow再大也扩不出去
flex-grow 小数权重在移动端的特殊行为
当所有子项 flex-grow 值加起来小于 1（比如 0.2、0.3、0.4），移动端浏览器（包括 iOS Safari 17+）仍按规范执行：分母强制为 1，而非实际总和。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 剩余空间 × 0.2 → 第一项获得
- 剩余空间 × 0.3 → 第二项获得
- 剩余空间 × 0.4 → 第三项获得
- 剩下 10% 的剩余空间被丢弃，不会填满容器
这种行为在横竖屏切换时极易暴露——原本刚好填满的布局，旋转后突然出现空白。调试时务必在开发者工具里检查「Computed」面板中的最终宽度，别只信 flex-grow 值。
响应式中动态改 flex-grow 的安全做法
不要只在媒体查询里改 flex-grow，必须同步处理收缩与基准：
- 桌面端侧边栏：
.sidebar { flex: 2 0 0; } - 移动端收起：
@media (max-width: 768px) { .sidebar { flex: 0 0 auto; width: 0; overflow: hidden; } } - 若保留可见性但禁用伸缩，必须设
flex-shrink: 0+width: auto，否则含长文本的项仍会被压扁 - IE11 / Android 4.4 WebView 不支持
flex: 2 0 0%，降级写法要拆开：flex-grow: 2; flex-shrink: 0; flex-basis: 0%;
最常被忽略的一点：flex-grow 的权重效果，永远建立在「容器主轴方向有明确尺寸约束」的前提下。在移动端，这往往意味着你得手动给父容器加 width: 100vw 或 max-width: 100%，而不是依赖它自动继承 body 宽度 —— 很多 H5 页面的 flex 布局失效，根源就在这里。
