flex-grow只在父容器有剩余空间时生效，即子项初始宽度和小于容器宽度；若设width会压制flex-basis导致失效，应删width或改用flex-basis，推荐用flex简写（如flex:1）统一控制三值。
flex-grow 什么时候起作用，怎么设才不白写
它只在容器有剩余空间时生效，也就是所有子项的初始宽度加起来小于容器宽度。如果没留空隙，flex-grow 值再大也没用。
常见错误是给元素同时设了 width 和 flex-grow: 1，结果 width 会压制 flex-basis 的计算逻辑，导致拉伸失效。正确做法是：要么删掉 width，要么改用 flex-basis 替代。
-
flex-grow: 0（默认）→ 不参与剩余空间分配 -
flex-grow: 1和flex-grow: 2的两个元素，剩余空间按 1:2 分配 - 想让某个区域“占满剩余”，直接设
flex-grow: 1，其他兄弟设flex-grow: 0或不写
flex-shrink 被压缩时到底怎么算比例
它的数值不是“缩多少像素”，而是“相对收缩权重”。浏览器先算出总溢出量，再按各元素的 flex-shrink × flex-basis 占比来分摊压缩量。
比如容器宽 600px，两个子项 flex-basis 都是 400px，总超 200px；若 A 的 flex-shrink: 2、B 是 flex-shrink: 1，那 A 实际压缩量是 B 的两倍（约 133px vs 67px），而不是简单按 2:1 切。
立即学习“前端免费学习笔记（深入）”；
- 设
flex-shrink: 0可防止被压缩，适合图标栏、固定操作按钮等 - 侧边栏常配
flex-shrink: 2，主内容区用flex-shrink: 1，这样窄屏下优先挤侧边栏 - 别只调
flex-shrink忘了flex-basis—— 它直接影响压缩基数
为什么推荐用 flex 简写而不是单写三个属性
因为 flex 简写会自动补全缺失值，行为更可预测；而单独写 flex-grow 时，flex-shrink 和 flex-basis 仍走默认（分别是 1 和 auto），容易引发意料外的收缩或尺寸漂移。
例如 flex: 1 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，这会让元素忽略自身内容宽度，纯按比例瓜分空间 —— 正是多数响应式布局想要的效果。
-
flex: 0 0 auto→ 不伸不缩，按内容宽高渲染（类似传统块级行为） -
flex: 1 0 200px→ 可伸展、禁止压缩、基准宽 200px -
flex: 3 2 300px→ 伸展权重 3、收缩权重 2、起始宽 300px
实际布局中容易忽略的兼容与陷阱
旧版 Safari（≤12）对 flex-basis: auto 解析异常，可能让元素宽度崩掉；Android 4.4 WebView 中 flex-shrink 默认值有时不生效。线上项目建议统一用 flex 简写并显式声明三值。
另一个高频坑：父容器没设 width 或 max-width，导致 Flex 项在某些嵌套场景下无限撑宽，flex-grow 表现失真。务必检查父级尺寸是否受控。
- 移动端小屏下，
flex-shrink太大可能把文字压成一行省略号，要配合min-width或overflow-wrap - 用
flex-direction: column时，flex-grow控制的是高度分配，此时flex-basis对应height而非width - 不要在同一个元素上混用
width和flex-basis，它们冲突，浏览器会按规范优先级处理，但不同引擎表现略有差异
