align-items: stretch 默认生效，但仅当父容器为flex、交叉轴有确定高度且子元素未设高度相关属性时才拉伸；column布局下它控制宽度而非高度，子项需用flex:1或确保祖先链有显式高度。
直接说结论：align-items: stretch 本身默认就开启，写不写它通常没区别；子元素高度达不到 100%，90% 的原因是父容器没显式高度，而不是这个属性没设。
为什么写了 align-items: stretch 还是不撑高
这个属性只在三个条件同时满足时才真正拉伸子项：
- 父容器是
display: flex（或inline-flex） - 父容器在交叉轴方向有**确定的高度值**（比如
height: 400px、height: 100vh，不能是height: auto） - 子元素没写
height、min-height、max-height，也没设align-self: flex-start等覆盖值
常见错误是只加了 display: flex 和 align-items: stretch，但父容器高度仍是默认的 auto——此时它没有“可 stretch 到的目标”，浏览器只能按内容高度渲染。
align-items: stretch 在 flex-direction: column 下完全不管高度
当主轴是垂直方向时，交叉轴就变成水平方向，align-items 控制的是子项的**宽度对齐**（比如是否拉宽填满），和高度无关。
想让子项在列布局中占满高度，得靠：
-
flex: 1（推荐，不依赖父容器显式高度） - 或者确保父容器有高度，并给子项设
height: 100%（但要逐层检查祖先链） -
justify-content在 column 下控制的是垂直间距，不是“撑高”，justify-content: stretch甚至不是合法值
子元素写了 height: 100% 反而让 align-items: stretch 失效
这不是 bug，是 CSS 计算逻辑：一旦子元素声明了 height: 100%，浏览器就认为你已接管高度控制，自动忽略 align-items: stretch 的拉伸行为。
更麻烦的是，如果父容器高度是 auto，height: 100% 实际算出来是 100% × 0px = 0px，子元素直接塌陷。
实操建议：
- 删掉所有子元素上的
height: 100%、min-height: 100% - 想填满？优先用
flex: 1 - 真要用百分比高度，必须确保
html、body、每一层父容器都有明确高度（如height: 100%或min-height: 100vh）
嵌套 Flex 容器里容易漏掉 min-height: 0
子 Flex 容器作为父 Flex 的子项，默认会被浏览器设 min-height: auto。这会导致它“拒绝塌缩”，进而阻断内部 flex: 1 子项向下拉伸的能力。
典型现象：外层 flex: 1 区域看着有高度，但里面的卡片就是不等高。
解决方法很简单，在嵌套的子 Flex 容器上加：
min-height: 0;
不需要改其他样式，也不需要加 height —— 这个声明只是释放拉伸权限，让 align-items: stretch 或内部 flex: 1 能正常工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
