flex-grow在小屏幕无效是因为容器无剩余空间；需确保flex容器宽度适配、子项可收缩（flex-shrink:1）、内容可折行或缩放，并推荐用flex:1 1 200px统一控制。
flex-grow 在小屏幕下为什么没效果？
因为 flex-grow 只在容器有剩余空间时才起作用，而小屏幕通常宽度紧张，子项默认不换行、也不压缩，导致容器溢出——此时根本没有“剩余空间”可分配，flex-grow 彻底闲置。
实操建议：
- 先确保父容器设了
display: flex且未设置固定宽度（如width: 100vw可能撑破视口） - 给子项加
flex-shrink: 1（默认值，但显式声明更稳妥），否则某些浏览器（如 Safari 旧版）可能忽略收缩行为 - 避免给子项设死的
width或min-width，尤其min-width: 300px这类值在手机上直接卡住布局
flex-shrink 不生效的典型场景
常见错误是子项内容过长（比如一长串无空格 URL）或图片未约束尺寸，导致即使 flex-shrink: 1 开启，浏览器也无法缩小——因为内容本身无法折行或压缩。
解决办法：
立即学习“前端免费学习笔记（深入）”；
- 对文本容器加
overflow-wrap: break-word和word-break: break-word - 对图片加
max-width: 100%和height: auto - 检查是否意外设置了
flex-basis: auto（这是默认值，问题不大），但若写成flex-basis: 100%，在窄屏下可能让子项强行占满整行，挤掉其他项
移动端推荐的 flex 组合写法
别单独调 flex-grow 或 flex-shrink，用 flex 简写更可控：
.item {
flex: 1 1 200px; /* grow shrink basis */
}含义：可放大、可缩小、基准宽度 200px。小屏幕下，当总宽度
注意点：
-
flex: 1是flex: 1 1 0的简写，但0作flex-basis会让项从零开始增长，视觉上可能突兀，不如设个合理像素值 - 若某项需固定宽度（如图标按钮），用
flex: 0 0 auto，避免它参与缩放
兼容性与 iOS Safari 的坑
iOS 14.5 之前，flex-shrink 对 img 或 input 等替换元素支持不稳定，常表现为不收缩或收缩过度。
绕过方案：
- 给替换元素包一层 ，把
flex属性写在外层- 用
min-width: 0强制触发 shrink（尤其对 flex 容器内的 flex 项）- 避免在
@media中反复切换flex-direction，iOS Safari 有时会卡住 shrink 计算真正难处理的是内容不可测的卡片布局——这时候光靠
flex-grow/flex-shrink不够，得配合min-width媒体查询或clamp()控制基础尺寸。 - 用
