flex: 1 是让子元素宽度严格等于父容器的首选方案，等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，关键在 flex-basis: 0% 使子项从零宽开始拉伸，彻底规避内容宽度干扰。
flex: 1 是最直接有效的写法
想让子元素宽度严格等于父容器（忽略兄弟元素、不等分、不依赖内容），flex: 1 是首选。它等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%，关键在 flex-basis: 0% —— 子项从零宽度起点开始拉伸，彻底绕过内容宽度干扰。
常见错误是只写 flex-grow: 1：此时 flex-basis 默认为 auto，浏览器先按内容宽度占位，再分配剩余空间，结果往往是“比内容宽一点”，而非“严格等于父宽”。
- 父容器必须已声明
display: flex或display: inline-flex，否则所有flex属性静默失效 - 若父容器本身宽度未显式约束（如
width: 100%、width: 300px或max-width），flex: 1会无空间可分，子项仍表现为内容宽度 - 多个子项都设
flex: 1会等分父容器宽度；若只要某一个填满，其余子项应设flex: 0 0 auto或固定width
width: 100% 在 flex 容器里为什么常失效
width: 100% 在 flex 子项中不是“不能用”，而是行为不可靠：它试图继承父容器的 content-box 宽度，但 flex 容器的宽度计算逻辑与普通块级容器不同。尤其当父容器宽度由内容撑开、或未设 width/max-width 时，width: 100% 会退化为内容宽度，而非视觉上“铺满”。
更糟的是，width: 100% 会强制覆盖 flex-basis，破坏 flex 的空间分配机制。例如父容器有 gap: 12px，子项又设了 width: 100%，极易触发横向溢出或滚动条。
- 仅在极老浏览器（IE10）且无法用
flex时才考虑 fallback，需加注释说明 - 若坚持用
width: 100%，必须确保父容器有显式宽度（如width: 100vw）且无flex-shrink: 0锁死 - Safari 旧版本曾有
width: 100%+flex渲染 bug，表现为内容截断
column 方向下填满宽度要改 align-items
当 flex-direction: column 时，主轴是垂直方向，交叉轴是水平方向。align-items: stretch（默认值）控制的是子元素的 宽度，不是高度——所以它本就该让子项填满父容器宽度。但如果你发现没生效，问题通常不在 align-items，而在子项自身。
子项若含图片、输入框、长单词文本等，默认带 min-width: auto，会锁死最小宽度，导致 align-items: stretch 失效。此时需显式加 min-width: 0 解锁。
- 推荐写法：
.child { align-self: stretch; min-width: 0; }（align-self可覆盖父级align-items） - 避免给子项设
width、max-width或flex-basis，它们会直接压制align-items行为 - 如果只想部分子项自适应宽度，其他保持内容宽，可对目标子项设
align-self: stretch，其余设align-self: start
IE11 兼容必须显式写 flex-basis: 0%
flex: 1 在 IE11 中存在解析 bug，常忽略 flex-basis，导致子项仍按内容宽度伸缩。不能只靠简写，必须补全。
稳妥写法是：flex: 1 1 0%，或拆成三行：flex-grow: 1、flex-shrink: 1、flex-basis: 0%。注意单位必须是 %，写 0（无单位）在 IE11 下可能回退为 auto。
- 不要混用
width和flex-basis：若同时设width: 200px和flex-basis: auto，浏览器以width为准，flex-grow只在超出部分起作用 - 响应式场景下，若需换行后仍保持每行填满，
flex: 1不适用，得改用flex-basis: calc(33.333% - 12px)+gap（IE 不支持gap，需用margin模拟并处理首尾） - 最易被忽略的点：父容器没显式宽度约束时，
flex: 1和align-items: stretch都会失效；而子项内未设min-width: 0，会让 flex 拉伸逻辑卡在内容宽度上——这不是 bug，是 flex 布局的固有行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
