align-items: stretch 未生效的主因是父容器缺乏明确高度基准或子元素存在 height/min-height 等覆盖属性；需确保父容器有 height/min-height，子元素无固定高、float、absolute 及干扰 box-sizing。
align-items: stretch 为什么没让子元素撑满容器高度
默认情况下 align-items: stretch 确实会让 flex 子项在交叉轴（通常是垂直方向）上拉伸，但前提是子元素**自身没有设置固定高度、最小高度或溢出限制**，且其内容不触发“收缩行为”。常见现象是：父容器设了 height: 300px，子项写了 background: #eee，但背景只包住文字，没填满全高。
- 子元素设置了
height、min-height或max-height—— 会覆盖 stretch 行为 - 子元素是
display: block的普通块级元素（比如<div>），但内部有margin或padding导致计算偏差 - 子元素包含图片、按钮等替换元素（replaced elements），它们有固有尺寸，可能抑制拉伸
- 父容器未定义明确高度（如仅靠内容撑开），此时
stretch实际无参照基准
检查父容器是否真有可拉伸的高度基准
Flex 的 stretch 不是“强制填满视口”，而是基于父容器的交叉轴尺寸。如果父容器高度由内容决定（比如没设 height 或 min-height），那子项拉伸后也不会“多出”高度 —— 它只是和兄弟项保持一致，而这个“一致高度”可能就是内容撑出来的最小值。
- 确认父容器设置了明确的
height、min-height或被其他约束（如flex: 1在嵌套 flex 中）赋予了高度 - 用浏览器开发者工具检查父容器 computed height 是否 > 0，且非
auto - 临时加
outline: 1px solid red到父容器，看它是否真占满预期区域
子元素 display 或 box-sizing 可能干扰拉伸效果
某些 display 值会直接禁用 align-items: stretch，比如 display: inline-flex 下的子项若设了 vertical-align，或子元素是 float 元素；更隐蔽的是 box-sizing: border-box 配合大 padding 时，视觉上像没填满，其实是边框/内边距占了空间，背景色确实没覆盖到外沿。
- 避免对子元素设置
float、position: absolute、display: contents - 确保子元素没有
vertical-align（它对 flex 子项无效，但若误写可能掩盖真实问题） - 检查是否漏写了
box-sizing: border-box，导致padding外推、背景色被“截断”在 content 区域 - 可临时加
border: 1px dashed blue到子元素，观察边框是否真撑满父容器交叉轴
替代方案：用 align-self 强制拉伸单个子项
如果只需某个子项填满高度，而其他项保持默认对齐，直接改父级 align-items 反而影响全局。这时应给目标子项单独设 align-self: stretch —— 它优先级高于父级 align-items，且不会干扰兄弟元素。
立即学习“前端免费学习笔记（深入）”；
-
align-self: stretch在子元素上显式声明，比依赖继承更可靠 - 注意：若该子元素本身有
height，仍需先清除（设为height: auto或unset） - 配合
flex: 1使用更稳妥：既保证主轴占满，又确保交叉轴拉伸（尤其当父容器高度不固定时）
最易被忽略的一点：flex 子项的背景色是否真的需要“填满高度”？很多时候你以为要拉伸，其实真正问题是父容器高度没定义清楚，或者子项被 margin/padding/line-height 暗中撑开 —— 动手前先用 devtools 的 layout 面板逐层核对 computed height 和 border-box 尺寸，比反复调 align-items 更快定位根因。
