align-items: stretch 默认使子元素等高，但受 height/min-height/父容器无明确高度等因素限制；需确保父容器有高度、子元素无固定高度约束，或改用 Grid 布局实现强制等高。
在 CSS Flex 布局中，子元素高度不一致是常见问题，尤其当某些子项内容少、有些内容多，或显式设置了不同 height 时。默认情况下，align-items: stretch 确实会让子元素在交叉轴（通常是垂直方向）上拉伸以填满容器高度——但这个行为有前提：子元素不能有固定的块级高度（如 height、min-height 或 max-height 限制），也不能是绝对定位或浮动元素。
为什么 align-items: stretch 没生效？
以下情况会阻止拉伸行为：
- 子元素设置了
height（比如height: 50px），会覆盖 stretch 效果 - 子元素设置了
min-height且值大于容器可分配高度，也会中断拉伸 - 子元素是
display: block但内部有margin-top/bottom或flex自身嵌套干扰了计算 - 父容器未设置明确高度（如
height: 100%或固定像素值），导致 stretch 缺乏“参考基准”
确保 stretch 正常工作的关键操作
要让所有子项真正等高，请按顺序检查并调整：
- 给父容器设置
display: flex和align-items: stretch（后者是默认值，可省略） - 确认父容器有明确的高度来源（例如
min-height: 200px、height: 100vh，或由内容撑开但足够高） - 移除子元素的
height、min-height、max-height（除非你刻意想限制） - 避免对子元素使用
align-self: flex-start等覆盖单个项对齐方式
替代方案：当 stretch 不适用时
如果必须保留某些子项的固定高度，又希望视觉上“看起来等高”，可用这些方法：
- 用
background-color+padding模拟高度一致（内容居中，背景延伸） - 对子元素统一设置
display: flex; flex-direction: column; justify-content: center;，再配合flex: 1让内部区域自适应 - 改用
grid布局：display: grid; grid-template-rows: 1fr;更强制等高，不受内容影响
一个小而实用的调试技巧
临时给父容器加边框、子元素加背景色和 outline，能快速看出实际尺寸分布：
.container { border: 1px solid #ccc; }
.item { background: #f5f5f5; outline: 1px dashed #999; }这样一眼就能判断是内容撑开、拉伸失效，还是盒模型干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
