align-items: stretch 能让子元素垂直拉伸，但需父容器有明确高度且子元素未设置 height、align-self 等覆盖属性；否则因交叉轴无可用空间或样式冲突导致失效。
align-items: stretch 能否让子元素垂直拉伸
能，但前提是父容器有明确高度（或受上下文约束产生高度），且子元素未设置 align-self、height、min-height 等覆盖拉伸行为的属性。默认情况下，align-items: stretch（flex 容器的默认值）会让子元素在交叉轴（垂直方向时即 Y 轴）上“尽可能撑满”容器可用空间。
为什么设置了 align-items: stretch 却没拉伸
常见原因不是属性写错，而是布局条件不满足：
- 父容器高度为
auto（比如没有设height或min-height，且无其他内容撑开），此时交叉轴无“可用空间”，拉伸无从谈起 - 子元素设置了
height、max-height或flex-shrink: 0配合固定尺寸，会阻止拉伸 - 子元素是
inline元素（如），或其display被重置为非块级/非 flex 项（如display: contents） - 父容器使用了
flex-direction: column，此时交叉轴变成水平方向，align-items控制的是宽度拉伸，而非高度
垂直拉伸的典型安全写法
要稳定触发垂直拉伸（主轴为 row，交叉轴为 column），推荐显式声明并约束关键条件：
.container { display: flex; align-items: stretch; /* 可省略，因是默认值 */ height: 300px; /* 必须有确定高度 */ } .item { / 不设 height / max-height / / 不设 align-self / / 可设 flex: 1 或 width，但避免干扰交叉轴 / }
若需子元素内部内容也垂直居中，可在子元素上加 display: flex; flex-direction: column; justify-content: center;，而不是依赖外部拉伸来对齐内容。
立即学习“前端免费学习笔记（深入）”；
align-items: stretch 和 flex: 1 的区别
二者目标相似但机制不同，容易混用：
-
align-items: stretch是容器级对齐策略，作用于所有子元素的交叉轴尺寸，不改变主轴分布 -
flex: 1是子元素级弹性分配，它通过flex-grow占据剩余主轴空间；在交叉轴上它**不会**导致拉伸——除非同时满足 stretch 条件 - 常见误操作：只写
flex: 1却忘了给父容器设高度，结果子元素主轴变宽了，高度仍由内容决定
真正需要垂直填满时，align-items: stretch 是更直接、低侵入的解法；而 flex: 1 更适合主轴等分布局或配合 flex-direction: column 实现高度分配。