根本原因是align-items: stretch虽默认启用，但需父容器有明确高度且子元素未被height/min-height/align-self等样式覆盖；常见失效包括父容器height: auto、子元素设height: 100%或align-self: flex-start、flex-direction: column时误用align-items控高度。
子元素高度不会自动随父容器撑开，根本原因不是Flex没生效，而是align-items: stretch被悄悄禁用了。
为什么加了display: flex却不见子元素拉高
align-items: stretch确实是默认值，但它只在“父容器有明确高度”且“子元素没锁死自身尺寸”时才起效。常见失效场景包括：
- 父容器仅靠内容撑开（
height: auto），没有height、min-height或max-height约束 - 子元素写了
height: 100%、min-height: 0或max-height: 200px，直接覆盖stretch逻辑 - 子元素设置了
align-self: flex-start（比如从UI库继承的样式），优先级高于父级align-items - 父容器是
flex-direction: column，此时align-items管的是水平对齐，不是高度
怎么让子元素真正“随父容器撑开”
关键不是加什么新属性，而是清除干扰项，让stretch自然生效：
- 给父容器设置明确高度，例如
min-height: 100vh或height: 400px；若需响应式，可用min-height: 100dvh - 删掉子元素所有显式的高度控制：
height、min-height、max-height——哪怕只是min-height: 0也不行 - 检查子元素computed样式中的
align-self值，确保是auto（回退到父级align-items）或stretch - 如果父容器本身高度来自内容，又想视觉上“等高”，
align-items: stretch仍会工作，但效果是子项统一按最高项内容高度拉齐，而非填满父容器
flex-direction: column下想让子项占满高度怎么办
方向一变，主轴和交叉轴就互换。align-items: stretch在column下控制的是宽度，不是高度。此时要撑高，得换思路：
- 用
justify-content: space-between或space-around分配空白，但不强制等高 - 给需要撑高的子项加
flex: 1（等价于flex: 1 1 0），它会在剩余空间中均分高度 - 避免写
height: 100%——在column流中，这容易触发循环依赖，尤其父容器高度未固定时 - 若只有单个子项需占满，
margin: auto可同时实现居中与填满剩余空间
比Flex更稳的替代方案：Grid
当Flex的stretch行为反复失效，或者嵌套层级深、需要多行等高时，Grid往往更直白可靠：
- 父容器设
display: grid+grid-template-rows: 1fr，子项自动占满高度，无需关心align-items或父容器是否设高 - 多列布局中省略
grid-template-rows，Grid默认用align-items: stretch拉齐每行内各列高度，兼容性更好 - Grid不依赖父容器显式高度也能稳定等高，对
min-height: 0、align-self等干扰更不敏感
最常被忽略的一点：浏览器开发者工具里看computed样式中的align-self值，比扫CSS规则列表更准——很多问题其实就卡在某个组件库悄悄注入的align-self: flex-start上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
