align-items: stretch 默认让子元素在交叉轴拉伸，但需满足无固定高、父容器有高度等条件；flex-direction为column时控制宽度而非高度；恢复stretch用align-self: auto；更可靠方案是grid布局。
align-items: stretch 是默认行为，但经常不生效？
多数情况下 align-items: stretch 确实会让子元素在交叉轴（通常是垂直方向）自动拉伸填满容器高度——前提是子元素**没有设置固定高度、最小高度或溢出限制**。一旦你写了 height、min-height、overflow 或者父容器没设明确高度，stretch 就会静默失效。
常见错误现象：flex-direction: row 下两个子项，左边文字多撑高了，右边却还是“贴顶”没跟着变高。
- 检查父容器是否设置了
height或min-height；Flex 容器若高度由内容撑开，stretch 仍可工作，但若父级是height: auto且无约束，某些浏览器（如 Safari）可能表现不一致 - 子元素不能有
height、max-height或align-self: flex-start这类覆盖值 -
display: flex的子元素如果内部用了position: absolute，它会脱离文档流，不再参与 stretch 计算
为什么 flex-direction: column 时 stretch 看不出效果？
因为 align-items 的“交叉轴”随 flex-direction 变化：row 时交叉轴是垂直方向（控制高度），column 时交叉轴变成水平方向（控制宽度）。所以 align-items: stretch 在 column 布局下会让子项**宽度拉满**，而不是高度拉满。
想让 column 布局下的子项高度一致？得换思路：
- 给父容器设固定高度（如
height: 300px），再配合align-items: stretch—— 此时 stretch 控制的是宽度，不是你想要的 - 真正要高度对齐，应改用
justify-content: stretch？不行，CSS 没这属性 - 正确做法：保持
flex-direction: row，或用display: grid配合grid-template-rows: 1fr
align-self 覆盖 align-items 后怎么恢复 stretch？
子元素写了 align-self: flex-start，导致它不再随兄弟项高度变化。想让它“重新加入 stretch 行列”，直接删掉那行样式还不够——因为 align-self 的初始值就是 auto，而 auto 的含义是“继承父级 align-items 值”。所以只要父级是 stretch，子项删掉 align-self 或显式设为 auto 即可恢复。
注意：align-self: stretch 是合法写法，但多数时候没必要——auto 就够了。例外是当父级 align-items 不是 stretch，而你只想某个子项拉伸。
- 别写
align-self: stretch来“保险”，它在某些旧版 Flex 实现中兼容性略差 - 如果子元素是
img或button等替换元素，它们可能自带align-self: flex-start（取决于 UA 样式），需显式重置 - 调试技巧：在 DevTools 中看子元素的 Computed 面板，确认
align-self最终计算值是不是stretch
实际项目中更可靠的替代方案
依赖 align-items: stretch 实现等高，在真实业务中容易因嵌套、响应式断点或第三方组件干扰而失效。更稳的做法是：
- 用
display: grid替代：父容器设display: grid; grid-template-columns: 1fr 1fr;，子项天然等高，且不受内容高度影响 - 对 Flex 布局加一层包裹：把每个子项包进一个
div，该div设display: flex; flex-direction: column; height: 100%，再让内容区域flex: 1占满剩余空间 - JavaScript 补位（仅限兜底）：监听 DOM 变化，读取最高子项的
offsetHeight，再统一赋给其他子项——但破坏了 CSS 布局逻辑，应避免
真正难的不是写对 align-items: stretch，而是判断什么时候它不该被信任。浏览器渲染细节、盒模型边界、甚至字体加载时机，都可能让 stretch 在某个时刻“看起来没起作用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
