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

示例：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

立即学习“前端免费学习笔记（深入）”；

.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 本身，而是它和高度计算链里某处隐式约束的冲突。先检查父容器有没有可测量高度，再逐个排除子元素的自我限制。