Flexbox 默认使子项等高，前提是父容器设 display: flex 或 inline-flex 且子项未设 height/min-height/flex-shrink: 0；stretch 是默认值，无需显式声明。
Flexbox 默认就让子项等高，但前提是父容器设了display: flex
很多人试了 align-items: stretch 没效果，根本原因是父容器压根没进 flex 上下文。Flex 的 stretch 是默认值，不用显式写，但必须满足两个前提：父元素是 display: flex 或display: inline-flex，且子元素没设 height、min-height 或flex-shrink: 0这类会干扰拉伸的属性。
常见错误现象：div写了 align-items: stretch 但高度还是参差不齐——八成父容器只是block，不是flex。
- 响应式场景下，用
@media切换flex-direction（比如从row切到column）时，stretch依然生效，无需额外处理 - 如果子项里有
img或video，记得加height: 100%或object-fit: cover，否则媒体元素可能撑开父容器导致“假不等高” - IE10/11 对
stretch支持不稳定，若需兼容，得加min-height: 1px到子项上
子项内容超长时，等高盒子会被撑开？用 flex-shrink 和overflow控制
Flex 的 stretch 只管初始高度对齐，不管内容溢出。一旦某子项文字太多、图片太大，整个 flex 容器高度就会被它带跑，其他项虽然“等高”，但实际是被强行拉高了——这不是 bug，是 flex 的正常行为。
解决思路不是禁用stretch，而是限制单个子项的“破坏力”：
立即学习 “ 前端免费学习笔记（深入）”；
- 给子项加
flex-shrink: 1（默认就是 1，一般不用改），确保它能被压缩 - 加
min-height: 0（尤其当子项是div嵌套div时）——这是关键，否则内部块级元素会阻止收缩 - 文字溢出用
overflow: hidden+text-overflow: ellipsis，多行截断补display: -webkit-box等私有属性 - 避免在子项上写
height: 100%，这会和 flex 拉伸冲突，优先用flex: 1
Grid 也能等高，但和 Flex 的 stretch 逻辑不同
如果布局本身是二维的（比如卡片网格要横竖都对齐），display: grid比 Flex 更直接。Grid 里 align-items: stretch 同样生效，但它作用于 grid item，且受 grid-template-rows 约束更强。
典型区别：
- Flex 靠父容器
align-items统一控制所有子项；Grid 可以按行 / 列单独设align-content和justify-content - Grid 中
minmax(0, 1fr)比1fr更安全，防止内容撑爆容器（1fr隐含min-width: auto） - Flex 在移动端做单列流更自然；Grid 适合固定列数 + 自适应行高的场景，比如仪表盘卡片
- 不要混用：父元素设了
display: grid，再给子项写flex属性是无效的
JavaScript 兜底方案只在必要时用，比如动态内容或旧浏览器
纯 CSS 做不到 100% 可靠时（比如子项高度由异步加载的图片决定，且无法预设宽高比），才考虑 JS。但别一上来就遍历 DOM 算高度——先确认是不是 CSS 真搞不定。
真要用，记住三点：
- 监听
load事件而非DOMContentLoaded，图片加载完成才计算 - 用
getBoundingClientRect().height而不是offsetHeight，后者可能包含隐藏溢出部分 - 批量操作：用
ResizeObserver替代setTimeout轮询，兼容性够用（Chrome 64+/Firefox 69+） - 别忘了取消观察器，避免内存泄漏——组件卸载时调用
unobserve
最常被忽略的点：等高不是目的，视觉一致性才是。有时候加一条 border-bottom 或阴影，比硬拉高度更省事，也更抗变。
