width: 100%在flex容器中失效，是因为子项默认不继承父容器宽度计算逻辑，尤其当父容器宽度由内容撑开或未设显式宽时，width: 100%退化为内容宽；真正起作用的是flex伸缩机制，如flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0）可强制均分剩余空间。
直接给子元素设 flex: 1，前提是父容器已声明 display: flex，且自身有明确宽度约束（比如 width: 100% 或固定值）。
为什么 width: 100% 有时失效？
在 Flex 容器里，width: 100% 的行为受父容器“计算后宽度”影响，而 Flex 子项默认不继承父容器的 width 计算逻辑——尤其当父容器宽度由内容撑开、或未设 width / max-width 时，width: 100% 就会退化为内容宽度。
- 常见错误现象：
.child { width: 100% }写了但没生效，子项只宽到内容长度 - 真正起作用的是 flex 的伸缩机制，不是百分比宽高继承链
- 如果必须用
width: 100%，得确保父容器有显式宽度（如width: 300px或width: 100vw），且没被flex-shrink: 0锁死
flex: 1 和 flex-grow: 1 有什么区别？
flex: 1 是简写，等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0。关键在 flex-basis: 0 ——它让子项从零宽度开始拉伸，彻底忽略内容宽度干扰；而单独写 flex-grow: 1 时，flex-basis 默认是 auto，仍会先按内容宽度占位，再分配剩余空间，容易导致填不满或溢出。
- 想严格填满可用空间 → 用
flex: 1，不是flex-grow: 1 - 多个子项共存时：
flex: 1让它们等分剩余空间；flex: 2和flex: 1则按 2:1 分配 - 若子项内有长文本或图片，加
min-width: 0防止内容撑开破坏拉伸
响应式场景下怎么避免换行错乱？
当目标是“填满宽度 + 自动换行”，flex: 1 就不合适了——它会让子项吃掉所有主轴空间，flex-wrap: wrap 失去触发条件。
- 需要换行 → 父容器加
flex-wrap: wrap，子项改用flex: 0 1 auto+min-width: 250px这类约束 - 要等宽多列（如三列卡片）→ 用
flex-basis: calc(33.333% - 12px)配合gap: 12px，别用 margin - IE 不支持
gap→ 老项目得用 margin 模拟，但必须处理换行后首尾多余外边距
最易被忽略的点：父容器没设宽度约束时，flex: 1 也会失效；而子项里的长单词或未设置 min-width: 0，会让 flex 拉伸直接卡住——这不是 bug，是 flex-basis 和内容宽度的天然博弈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
