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或阴影，比硬拉高度更省事，也更抗变。
