align-items: stretch 使子项在交叉轴方向拉伸至父容器可用高度（减去 padding/border），前提是父容器有明确高度基准且子项未设置 height/max-height、align-self 等覆盖属性；flex-direction: column 时控制宽度而非高度。
align-items: stretch 是怎么让子项变高的
它不改变子项内容，只拉伸子项的盒模型（border-box）在交叉轴方向的尺寸。前提是父容器是 display: flex 或 display: inline-flex，且交叉轴有可参照的高度——比如父容器设了 height、min-height，或被更高子项撑开。
拉伸生效时，子项的计算高度会变成父容器交叉轴可用高度（减去 padding 和 border），无论它原本内容多矮。这个过程发生在 layout 阶段，纯 CSS，无 JS 参与。
- 默认就是
stretch，写不写都一样；显式声明主要为防被继承值或组件库覆盖 - 若父容器
height: auto且所有子项都很短，那“最高子项”决定容器高度，其余子项仍会拉伸到这个高度 → 视觉等高 - 若父容器
height: 300px，所有子项严格拉满 300px，除非某项写了align-self: flex-start
哪些样式会让 stretch 失效
不是属性没起作用，而是被其他规则覆盖或剥夺了拉伸条件。最常踩的坑集中在子项自身和父容器两个层面：
- 子项写了
height、max-height或min-height：前两者直接锁死高度，min-height会生效并阻止进一步拉伸 - 子项写了
align-self: flex-start/center/baseline：覆盖了父级align-items，退出拉伸队列 - 父容器没有明确高度基准：比如
height: auto且内部全是position: absolute或空内容，容器高度塌缩为 0 - 子项用了
display: table-cell或float: left：脱离 flex 格式化上下文，不再参与 stretch 计算
flex-direction: column 下 stretch 还管高度吗
不管。此时主轴是垂直方向，交叉轴变成水平方向，align-items: stretch 控制的是子项的**宽度**，不是高度。
想在 column 方向下实现“等高”，本质是错把目标当成了 stretch 的能力范围。正确做法是：
- 换回
flex-direction: row（最常用） - 改用
display: grid，配grid-template-rows: 1fr+align-items: stretch - 或让子项自己成为 flex 容器：
display: flex; flex-direction: column; justify-content: center;，但这是内容居中，不是容器等高
移动端和响应式里 stretch 容易断掉的原因
iOS Safari 地址栏收放、软键盘弹出、横竖屏切换都会导致 vh 单位重算，如果父容器只依赖 height: 100vh，可能瞬间归零，stretch 就失去拉伸目标。
更稳的做法是：
- 父容器用
min-height: 100vh，而非height: 100vh - 子项禁用
height: 100%，它在 flex 子项中行为不稳定；改用flex: 1（仅影响主轴）配合自然 stretch - 图片加载延迟可能造成初始塌陷：给
<img>加height: auto; max-width: 100%，同时确保其父容器有min-height - 避免在子项里嵌套
position: sticky或fixed元素——它们脱离文档流，可能干扰 stretch 对高度的感知
真正难的不是写对那一行 CSS，而是让 stretch 在视口反复变化、内容异步加载、系统 UI 干扰的现实场景里，始终有高度可依、有边界可算、有渲染可稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
