flex-grow 无反应的主因是父容器未设 display: flex 或子元素被 width/flex-basis 等固定尺寸锁定；其仅在有剩余空间且未被硬性约束时按比例分配。
flex-grow 为什么加了没反应？
常见错误是父容器没设 display: flex，或者子元素被设了固定宽高（比如 width: 200px）锁死了伸缩能力。flex-grow 只在剩余空间分配时起作用，前提是父容器有明确主轴方向且子元素没用 flex-basis 或宽度硬顶死。
- 确认父容器已设置
display: flex且主轴方向为row（默认）或column - 检查子元素是否意外设置了
width/height、flex-basis或min-width/max-width，这些会压制flex-grow的生效空间 -
flex-grow值是比例关系，flex-grow: 2和flex-grow: 1在同一容器中才体现 2:1 分配，单独一个元素设再大也没意义
flex-shrink 缩小后内容被裁切怎么办？
这是最常被忽略的点：flex-shrink 默认值是 1，但真正触发缩小的前提是「内容总宽度超过容器」，而浏览器默认不会让文字换行或压缩字体——它会先尝试把内容挤出容器边界，再按比例收缩盒子本身，导致文字溢出或被隐藏。
- 给文字类子元素加
min-width: 0（或overflow: hidden），否则 flex item 的最小宽度默认是内容宽度，flex-shrink就失效 - 如果希望文字自动换行，配合
word-break: break-word或white-space: normal -
flex-shrink不控制内容渲染，只影响盒模型尺寸；内容是否可见，取决于overflow、min-width等后续样式
flex-grow 和 flex-shrink 能不能只用一个？
能，而且多数场景下应该这么做。比如做响应式侧边栏+主内容布局，通常希望侧栏固定宽、主内容占满剩余空间：侧栏设 flex: 0 0 240px（不伸不缩），主内容设 flex: 1 0 0（可伸、不可缩、初始为 0）——这里 flex-shrink: 0 就是为了避免窄屏下主内容被压扁。
-
flex: 1是flex: 1 1 0的简写，意味着“可伸可缩”，很多布局其实不需要缩 - 设
flex-shrink: 0后，即使容器变窄，该元素也不会缩小，可能触发横向滚动或溢出，需结合min-width或媒体查询兜底 - 移动端卡片列表常用
flex: 0 0 calc(50% - 8px)，明确禁止伸缩，靠数量和间隙控制布局
flex 属性简写容易踩的兼容性坑
flex 简写会重置所有三个子属性（flex-grow、flex-shrink、flex-basis），哪怕你只写两个值，第三个也会被设成默认值。老版本 Safari（iOS 9–12）对 flex: 1 解析异常，会把 flex-basis 当成 0% 而非 0，导致高度计算错误。
立即学习“前端免费学习笔记（深入）”；
- 线上项目建议显式写全：
flex: 1 0 0比flex: 1更可控 - 遇到 iOS 旧版兼容问题，把
flex-basis改成带单位的0px（即flex: 1 0 0px），可绕过 Safari 对百分比的误解析 - 不要混用
flex简写和单独声明，比如先写flex: 1又覆盖flex-shrink: 0，后者可能被忽略
事情说清了就结束。真正难的不是记住数值，而是每次改完 flex 属性都要检查父容器 display、子元素 min/max 约束、以及内容自身的换行与截断行为——这三者不协调，伸缩效果永远不对劲。
