align-items: stretch 失效主因是子项存在 height/max-height/min-height 等限制，或父容器无明确高度；推荐用 gap 替代 margin 实现等高与间隙分离。
flex 容器里子元素高度不一致，align-items: stretch 为什么没生效
默认情况下 align-items: stretch 确实会让 flex 子项在交叉轴（通常是垂直方向）拉伸到容器高度，但前提是：子元素没有设置固定高度、最大高度或 min-height 干扰拉伸逻辑。常见失效原因包括：
- 某个子项写了
height: 200px或max-height: 300px—— 拉伸被强制截断 - 子项内部有
display: table或绝对定位元素，导致自身高度脱离 flex 布局流 - 父容器没设明确高度（比如
height: auto），stretch就没参照基准 - 用了
margin（尤其是margin-bottom）后视觉上“看起来不等高”，其实是外边距叠加造成的错觉，不是实际高度差异
用 margin 模拟等高间隙时的典型陷阱
很多人想靠给子项加 margin-bottom 来制造列间空隙，结果发现最后一行子项底部多出空白、或列高不齐。这是因为 margin 是外边距，不参与 flex 高度计算，stretch 只按内容区拉伸，而 margin 会额外撑开容器。
- 避免对 flex 子项直接设
margin-bottom—— 改用gap（推荐） - 如果必须用
margin，统一只设margin-right和margin-bottom，再用负 margin 修正容器：父容器加margin-bottom: -Xpx抵消最后一行多余间隙 -
gap是现代方案：display: flex; flex-wrap: wrap; gap: 16px;—— 它不会影响子项拉伸逻辑，且自动处理边缘间隙
真正需要等高 + 有内容高度差异时的稳妥做法
当子项内容长度差异大（比如一列只有标题，另一列有长段落），又要求视觉上“底边对齐”且“高度一致”，仅靠 align-items: stretch 不够，得配合其他约束：
- 给所有子项统一设
min-height: 0（防止某些浏览器对图片/iframe 的默认最小高度干扰） - 确保父容器有明确高度来源：要么设
height，要么设min-height，或让其由内容撑开（此时各子项会等高到最长内容的高度） - 若需“不管内容多少，都强制统一高度”，可在子项上加
height: 100%，但前提是父容器高度已确定（否则无效） - 慎用
align-self: stretch单独设置某一项——它可能覆盖父级align-items，反而破坏一致性
一个能跑通的最小完整示例
.container {
display: flex;
flex-wrap: wrap;
gap: 16px;
min-height: 200px; /* 提供 stretch 的基准 */
}
.item {
flex: 1 1 200px; / 允许缩放，基础宽度 200px /
padding: 12px;
background: #f5f5f5;
/ 不设 height / max-height / margin-bottom /
}
上面这段代码中，只要 .container 有足够高度（比如被内容撑开，或设了 min-height），所有 .item 就会自动等高。加 gap 后无需任何 margin，也不影响 stretch 行为。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：flex 等高不是“强制所有子项像素级一致”，而是“在可用空间内拉伸到相同尺寸”。一旦某个子项内容超出容器可分配高度（比如文字太多+没设 overflow），它就会溢出，此时所谓“等高”就只是布局上的错觉了。
