align-items: stretch是flex默认行为，无需显式声明；失效主因是父容器无明确高度或子项存在height/min-height/align-self等覆盖设置。
直接给父容器加 display: flex，子项不设 height、min-height 或 align-self，就能让内容区域在垂直方向自动拉伸——align-items: stretch 是默认行为，不是“要启用”，而是“别破坏它”。
为什么写了 align-items: stretch 还不拉伸？
最常见原因是拉伸没参照物：父容器高度是 auto，靠内容撑开，子项根本不知道“拉到多高”。浏览器不是不执行 stretch，是它无从下手。
- 检查父容器是否设置了
height、min-height（比如min-height: 100vh）或被上级 flex/grid 容器约束了高度 - 确认子项没写
height: 200px、max-height: 150px或align-self: flex-start—— 这些会直接覆盖 stretch - 注意
position: absolute的子项不参与 stretch 计算，哪怕它在 DOM 里是子元素
Flex 里用 flex: 1 比 height: 100% 更可靠
flex: 1 不是替代 stretch，而是主动参与空间分配；而 height: 100% 依赖父级有明确高度且继承链完整，在嵌套或响应式场景下容易断掉。
-
flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，关键在flex-basis: 0清空原始尺寸基准 - 多个子项都设
flex: 1，它们均分剩余高度；想某一项占更多，改flex: 2即可 - IE11 下建议双保险：
height: 100%+flex: 1，只靠前者有时不生效
移动端和图片加载导致的拉伸塌陷
图片未加载完成时尺寸为 0，父容器高度塌缩，stretch 失效；加载后又不触发重拉伸，视觉上就是“先矮后跳”。
- 给
<img>加height: auto和max-width: 100%，避免撑开单个子项 - 父容器设
min-height: 100vh而非height: 100vh，防 iOS Safari 地址栏切换时 viewport 变化引发重绘异常 - 若子项含
position: sticky或fixed元素，确保其父容器有position: relative，否则脱离文档流影响 stretch 计算
真正容易被忽略的不是怎么写 stretch，而是它只作用于直接子项、只在交叉轴生效、且永远让位于显式尺寸声明——哪怕你只在一个子项里写了 min-height: 44px，其余子项也会跟着被这个最小值“锚定”，而不是自由拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
