flex子元素未撑满高度是因为align-items: stretch生效需三前提：父容器为flex布局、交叉轴有确定尺寸、子元素无固定高/覆盖对齐值；column方向时它控制宽度而非高度。
为什么 flex 容器里的子元素高度没撑满？
默认情况下，align-items: stretch 确实会让 flex 项目在交叉轴上拉伸以填满容器高度——但前提是：子元素**没有设置固定高度、最小高度或溢出限制**，且父容器本身有明确高度。常见失效场景是父容器 height: auto 或子元素写了 height: 100% 反而破坏了 stretch 行为。
align-items: stretch 生效的三个前提
这个属性不是“万能撑高开关”，它只在满足以下条件时才真正起作用：
- 父容器是
display: flex或display: inline-flex - 父容器在交叉轴方向（比如 column 布局下的 width，row 布局下的 height）有**确定尺寸**（如
height: 400px、height: 100vh，不能是height: auto） - 子元素未显式设置
height、min-height、max-height，也未设置align-self: flex-start等覆盖默认 stretch 的值
常见错误写法与修复对比
下面这段代码看似想让子项占满容器高度，实际会失败：
.container {
display: flex;
flex-direction: row;
/* ❌ 缺少 height，容器自身高度由内容决定 */
}
.item {
/* ❌ height: 100% 在 flex 下不继承父容器计算后高度，反而阻止 stretch */
height: 100%;
}正确做法是删掉 height: 100%，确保父容器有高度：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: row;
height: 300px; /* ✅ 显式设置高度 */
/* align-items: stretch 是默认值，无需重复写 */
}
.item {
/* ✅ 删除 height，让 stretch 自动生效 */
/* 可选：用 flex: 1 协同控制比例 */
}flex-direction 为 column 时的高度陷阱
当布局方向是 flex-direction: column，交叉轴变成水平方向（width），此时 align-items: stretch 控制的是**宽度**而非高度。想让子项撑满高度，得靠主轴行为（即 flex: 1 或 height: 100%），而不是 align-items。
例如：
.container {
display: flex;
flex-direction: column;
height: 500px; /* ✅ 容器高度确定 */
}
.item {
flex: 1; /* ✅ 让它在主轴（垂直）方向占剩余空间 */
/* ❌ align-items: stretch 不影响高度，只影响宽度 */
}真正容易被忽略的是：align-items 的作用轴完全取决于 flex-direction，不是“永远管高度”。
