align-items: stretch 默认生效但需父容器有明确高度，且子元素未被 align-self、min/max-height 或内容尺寸限制；统一 box-sizing 和设置 height: 100% 可避免常见陷阱。
flex子元素高度不一致？align-items: stretch 默认就生效
只要父容器是 display: flex，且没显式设置 align-items，子元素默认就会拉伸到容器高度——也就是 align-items: stretch 生效。但很多人发现子元素高度还是参差不齐，问题通常不在这个属性本身，而在其他约束干扰了拉伸行为。
哪些情况会让 align-items: stretch 失效
以下任意一条都会阻止子元素拉伸到父容器高度：
-
min-height或max-height设得太小/太紧，限制了拉伸空间 - 子元素设置了
align-self: flex-start（或center/baseline）——它会覆盖父级的align-items - 子元素内部内容触发了
min-content高度（比如未设overflow: hidden的长文本、图片未约束宽高比） - 父容器没设定明确高度（如
height: auto且无内容撑开），此时 stretch 实际拉伸到的是“行内最大内容高度”，不是你预期的统一高度
确保等高的最小可行写法
不需要额外 hack，只需两步：
- 给父容器设一个明确的高度来源：比如
height: 200px、min-height: 200px，或者用flex: 1在嵌套 flex 布局中占满剩余空间 - 确认所有子元素没写
align-self，也没被min-height/max-height卡住；如有图文混排，给图片加height: 100%和Object-fit: cover
示例：
立即学习“前端免费学习笔记（深入）”；
.container { display: flex; min-height: 150px; /* 关键：提供拉伸基准 */ } .item { flex: 1; /* 不要写 align-self，不要写 height: auto */ }和 align-items: stretch 搭配使用的常见陷阱
容易被忽略但影响结果的细节：
-
box-sizing: border-box必须统一，否则 padding/border 会挤占内容区高度，导致视觉上“不等高” - 子元素若含
textarea或iframe，它们有固有高度逻辑，需额外设height: 100% - 在 safari 中，如果子元素是
display: block且含浮动子项，可能破坏 stretch 行为——改用display: flow-root或清除浮动 - 使用
flex-direction: column时，align-items: stretch控制的是宽度而非高度，别混淆主轴/交叉轴
真正卡住的往往不是 align-items 本身，而是它和高度计算链里某处隐式约束的冲突。先检查父容器有没有可测量高度，再逐个排除子元素的自我限制。