align-items: stretch在交叉轴方向强制拉伸子元素border-box至父容器可用尺寸（减去padding/border），不改变内容，纯css layout阶段完成；需父容器为flex且有明确高度基准，子项未设height/max-height/align-self等覆盖属性。
align-items: stretch 是怎么拉伸子元素高度的
它不改变子元素内容，只在 layout 阶段把子元素的 border-box 在交叉轴方向强制撑到父容器的可用尺寸（减去 padding 和 border）。前提是：父容器是 display: flex 或 display: inline-flex，且交叉轴有明确高度基准（比如 height、min-height，或被更高子项撑开）。
这个过程纯 CSS，无 JS 参与；align-items: stretch 是默认值，写不写效果一样——显式声明通常只是为了防被继承值或组件库覆盖。
为什么子元素写了 height 还会被拉高
不是“被拉高”，而是你写的 height 被浏览器忽略了。只要子元素显式设置了 height、max-height 或 min-height（哪怕 min-height: 0），align-items: stretch 就会直接退出，不再参与尺寸计算。
-
height: 100%特别危险：父容器高度未定义时，100% 解析为 0，还顺手封死 stretch -
min-height: auto不提供拉伸基准，等同于没写 - 图片、
iframe等替换元素自带固有尺寸，即使没写height，也可能抑制 stretch，需加height: 100%; min-height: 0;才能强制参与
flex-direction: column 下 align-items 还管高度吗
不管。此时主轴是垂直方向，交叉轴变成水平方向，align-items: stretch 控制的是子元素的 width，不是高度。
想让子元素在 column 布局下填满父容器高度，得靠：
-
justify-content（主轴对齐，影响垂直分布） - 子元素自身设
flex: 1（等价于flex: 1 1 0，在主轴上均分空间） - 别在 column 布局里指望
align-items撑高 —— 它真正在干的事，是把所有子项拉宽到父容器宽度
哪些样式会让 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 计算
真正要盯住的从来不是“怎么加 align-items”，而是“有没有哪条规则悄悄把它弄没了”——尤其是那些看起来无关紧要的 height、align-self、或嵌套在 @media 里的半截声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
