flex-grow为0时子元素不放大，因其仅控制剩余空间分配权重而非放大开关；真正防撑开需配合flex-shrink:0、min-width:0或overflow:hidden。
flex-grow 值为 0 时为什么子元素完全不放大？
因为 flex-grow 控制的是「剩余空间的分配权重」，不是「是否允许放大」的开关。当值为 0，表示该元素放弃所有剩余空间，哪怕父容器有富余宽度，它也严格按 flex-basis（或 width）显示。
常见错误是以为设成 0 就能“锁死尺寸”，结果发现内容撑大后还是溢出——这时真正该设的是 flex-shrink: 0，防止压缩，而非依赖 grow。
-
flex-grow: 0+width: 200px→ 固定 200px，不争剩余空间，但内容超长仍会撑开 - 想真正“不放大且不撑开”，得加
min-width: 0或overflow: hidden配合flex-shrink: 0 - 多个子项都设
flex-grow: 1，等效于均分剩余空间；设为2和1，则按 2:1 分配
flex-shrink 为什么有时不生效？
flex-shrink 只在父容器主轴空间不足、触发压缩时才起作用。但它不是“按比例缩小尺寸”，而是按权重去缩减「超出部分」——具体缩减量 = (自身 flex-basis × flex-shrink) ÷ 总权重 × 超出总量。
所以容易踩坑：设了 flex-shrink: 0 却仍被压缩，大概率是因为该元素内部文本或图片没设置 min-width: 0 或 overflow: hidden，导致其“固有尺寸”被浏览器算得过大。
- 图片默认不收缩？加
max-width: 100%+height: auto - 长单词/URL 撑破？用
word-break: break-word或overflow-wrap: break-word -
flex-shrink: 0对flex-basis: auto的元素效果不稳定，建议显式设flex-basis: 0或具体值
flex-grow 和 flex-shrink 的权重计算要不要考虑 flex-basis？
要，而且影响很大。实际缩放行为由三者共同决定：flex-basis 是基准尺寸，flex-grow 决定怎么分剩余空间，flex-shrink 决定怎么扣掉溢出空间。
例如两个子项：flex: 1 1 200px 和 flex: 2 3 100px，父容器总宽 500px：
剩余空间 = 500px − (200px + 100px) = 200px → 按 1:2 分配 → 各得 66.7px / 133.3px 溢出场景下（比如总宽 350px），溢出量 = (200+100)−350 = −50px → 按 (200×1) : (100×3) = 200:300 = 2:3 扣减
- 省略
flex-basis（如写flex: 1）等价于flex: 1 1 0，基准为 0，所有空间全靠grow分配 - 设
flex-basis: auto会先取内容自然宽，再按权重缩放，结果更难预测，调试时建议优先用具体数值 - 用
flex简写时，顺序是flex-grow flex-shrink flex-basis，漏掉第三个值默认为0，不是auto
响应式中动态切换 flex-grow 权重的稳妥做法
直接在媒体查询里改 flex-grow 值可行，但要注意：如果子元素本身有固定宽高或内边距，单纯调权重可能引发布局抖动或错位。更稳的方式是结合 class 切换 + CSS 自定义属性控制。
- 避免在
@media中反复写flex-grow: 1/flex-grow: 0，改用语义类名，如.sidebar--fixed和.sidebar--fluid - 用
--fg: 0这类自定义属性，在 JS 中动态改值，CSS 里写flex-grow: var(--fg, 1)，便于后续扩展逻辑 - 移动端常需“主内容占满、侧边栏收窄”，此时推荐
flex: 0 0 280px（侧边栏） +flex: 1 1 auto（主区），比纯 grow/shrink 更可控
权重本身没有“动态计算”能力，所谓动态，本质是手动干预或用 JS 监听容器尺寸后重设样式——但多数场景，用好 flex-basis 和媒体查询组合，比硬套权重更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
