Flex 容器默认通过 align-items: stretch 实现子项等高，前提是未显式设置 height、min-height、align-self 或修改 align-items；常见破防点包括内部 margin 坍塌、绝对定位脱离文档流、老浏览器兼容性问题及 gap 替代 margin 的必要性。
flex 容器默认就拉齐子项高度，但前提是你没动过 align-items
只要父容器设了 display: flex，且子项没显式设置 height、min-height 或 align-self 覆盖，子项就会自动等高——这是 align-items: stretch 的默认行为。很多人以为要手动写 align-items: stretch，其实不写也一样。
常见误操作：
- 给子项加了
height: auto或height: fit-content（反而破坏拉伸） - 子项内部用了
position: absolute，脱离文档流后高度不参与 stretch 计算 - 父容器设置了
align-items: flex-start之类，直接关掉了拉伸
卡片内容高度不一致时，为什么 看起来没等高？
视觉上“不等高”，往往不是 flex 没生效，而是子项的 padding、margin、边框或内部元素的 margin collapse 导致底部对不齐。尤其当卡片里有标题 + 描述 + 按钮，而某张卡没按钮时，底部留白差异会很明显。
解决思路：
立即学习 “ 前端免费学习笔记（深入）”；
- 统一子项内关键区块的
margin（比如描述文字末尾不要用margin-bottom，改用padding-bottom在卡片容器上） - 给子项设
box-sizing: border-box，避免边框 / 内边距撑大计算高度 - 用
min-height: 0防止子项内弹性子元素（如另一个 flex）干扰 stretch（IE11 和旧 Safari 中较关键）
需要兼容老 浏览器 时，align-items: stretch 有哪些坑？
IE10–11 对 stretch 支持不完整：如果子项是 display: block 且内部有 display: flex 的子元素，IE 可能不拉伸；Safari 9–13.1 在某些嵌套场景下也会失效。
稳妥补救方式：
- 给子项加
min-height: 1px（触发 stretch） - 或者用
align-self: stretch显式写在每个子项上（绕过父级继承问题） - 极端情况可配合 JS 测量最高卡片，再统一设
min-height，但仅限无法用 CSS 解决的遗留系统
.card-grid {display: flex; gap: 1rem;} .card-grid > * {flex: 1; min-height: 0; /* 关键：防止内部 flex 内容撑开限制 */ box-sizing: border-box;} .card-grid > *:not(:last-child) {margin-right: 0; /* 避免 gap + margin 叠加 */}用 gap 替代 margin 是等高卡片的隐形保障
gap 不影响 flex 子项的 stretch 行为，而用 margin 做间距容易导致最后一行卡片右 / 下边缘多出空白，视觉错乱。更重要的是：gap 会自动避开容器边界，不会让 flex 容器因 margin 溢出而触发滚动条，间接保住了高度一致性。
注意点：
- IE 不支持
gap，需回退到margin+:nth-child清除最后一项 - Flex 中
gap在 Safari 14.1+ 才完全稳定，旧版建议加flex-wrap: wrap并用媒体查询降级
flex 等高卡片最常破防的地方不在布局逻辑，而在子项内部的 margin 处理和浏览器对 min-height: 0 的解释差异。
