align-items: stretch 失效主因是容器无明确高度或子元素设了 height/min-height/align-self；flex-direction: column 时需用 flex: 1 撑高；IE11 需加 min-height: 0 或弃用 stretch。
flex 项目没撑满容器高度，align-items: stretch 不生效？
默认情况下 align-items: stretch 确实会让 flex 项目在交叉轴（垂直方向）自动拉伸，但前提是：容器本身有明确高度，且子元素没有设置 height、min-height 或 align-self 覆盖。常见失效场景是父容器高度由内容撑开，或者子元素写了 height: auto 或 align-self: auto（虽默认就是 auto，但显式写反而可能触发旧版浏览器兼容逻辑）。
- 检查 flex 容器是否设置了
height、min-height或max-height—— 没有明确高度时，stretch 无参照基准 - 确认子元素没写
height、min-height或max-height—— 这些会阻止 stretch 拉伸 - 留意
align-self值：哪怕设成auto，在某些旧版 Safari 中也可能干扰 stretch 行为；建议直接删掉或设为stretch - 如果容器是
display: flex且方向为column，那 stretch 是作用于“主轴”（此时是垂直方向），需确保容器有高度约束
flex-direction: column 时，子元素仍不占满高度？
当 flex 容器设为 flex-direction: column，交叉轴变成水平方向，align-items 控制的是左右对齐，而上下拉伸要靠 justify-content 或子元素自身高度行为。此时 align-items: stretch 不影响高度，真正起作用的是：
-
justify-content: stretch—— 无效，该属性不支持stretch值 - 必须让子元素继承容器高度，或用
flex: 1占据剩余空间 - 更可靠的做法是给需要撑高的子元素加
flex: 1，它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，能主动分配剩余空间
.container {
display: flex;
flex-direction: column;
height: 300px; /* 必须有明确高度 */
}
.item-full {
flex: 1; /* 关键：让这个子项撑满剩余高度 */
}IE11 下 align-items: stretch 失效怎么办？
IE11 对 stretch 的实现有缺陷，尤其当子元素是块级元素且未设 height 时，常表现为高度塌陷。这不是 bug，而是其 flex 对齐逻辑与标准不一致导致的。
- 避免依赖 IE11 的 stretch 行为，改用
flex: 1显式声明拉伸 - 若必须用
align-items: stretch，需给子元素加min-height: 0（IE11 默认min-height: auto会阻断拉伸） - 不要对 flex 子元素同时设
height: 100%和flex: 1—— IE11 会冲突，优先取height - 测试时用
display: -ms-flexbox+ 对应前缀属性，但建议只在兜底场景用
为什么加了 height: 100% 还是不撑满？
height: 100% 的计算依赖父元素的高度是否“可确定”。如果父 flex 容器高度来自内容（即未设 height 或 min-height），那么 100% 就是 0，子元素自然不会撑开。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器有可计算的高度（如
height: 400px、min-height: 100vh、或被更高层祖先限高） -
height: 100%在 flex 子元素中优先级低于flex-basis，若同时存在，后者胜出 - 更稳妥的替代方案是：去掉
height: 100%，改用flex: 1或align-self: stretch（并满足 stretch 前提）
最常被忽略的一点：flex 容器的 height 是否真的生效了——比如它被 position: absolute 或 float 影响，或者父级用了 display: inline-flex 导致高度计算异常。先用 DevTools 检查容器 computed height，再判断 stretch 是否该起作用。
