flexbox等高布局需满足容器有高度来源且子项不设height类属性；响应式下align-items:stretch失效实因父容器交叉轴约束丢失；须守住父容器非height:auto、子项无height相关属性、box-sizing统一为border-box三大边界。
Flexbox 的等高布局在响应式场景下基本能开箱即用，但必须满足“容器有高度来源”和“子项不设 height 类属性”两个硬条件；否则屏幕一缩放，等高就崩。
为什么响应式断点里 align-items: stretch 突然失效
不是 align-items 失效，而是响应式媒体查询改了父容器的约束条件，间接破坏了 stretch 的前提：
- 在大屏写了
height: 600px，小屏改成height: auto→ 容器交叉轴尺寸丢失，stretch 无基准可拉 - 用
flex: 1占位，在小屏被父级flex-direction: column包裹后，该区域实际高度由内容撑开 → 子项仍等高，但“高度”等于最高子项内容高度，视觉上留白变多 - 媒体查询中给某个子项加了
align-self: flex-start（比如为了对齐图标），结果整行等高逻辑被单点击穿
响应式等高必须守住的三个 CSS 边界
这些不是建议，是浏览器计算 stretch 的刚性规则：
- 父容器在交叉轴方向不能是
height: auto且无其他约束 —— 改用min-height: 300px或flex: 1（在弹性上下文中） - 子项禁止出现
height、max-height、min-height—— 若需最小高度保障，写min-height: min-content或min-height: fit-content（注意 Safari 旧版兼容性） - 所有子项的
box-sizing必须统一为border-box—— 混用content-box会导致 padding/border 计算偏差，视觉错位
移动端常见破防点：图片、文字截断与 margin 坍塌
等高本身生效了，但卡片底部对不齐、文字溢出、按钮位置飘移——问题不在 flex，而在内容层：
- 图片没加
max-height: 100%+object-fit: cover，一放大就撑高整列 - 标题用
margin-bottom: 1rem，但某张卡没标题 → 底部空隙少 1rem，看起来“矮了一截” - 描述文字用了
line-clamp，但未配display: -webkit-box和-webkit-box-orient: vertical→ 截断失败，文字换行拉高容器 - 按钮用
margin-top: auto吸底 → 直接覆盖 stretch 行为，子项不再拉伸
真正容易被忽略的是：等高只管容器盒，不管内容渲染节奏
当卡片内容通过 JS 异步加载，或字体加载延迟导致文字重排，align-items: stretch 不会二次触发。它只在初始渲染时按当时计算的高度拉伸一次。如果后续内容变高，父容器高度会增长，但已渲染的子项不会自动再拉伸 —— 这时候得靠 resize 监听、IntersectionObserver 触发重绘，或者干脆用 grid-template-rows: 1fr 替代（Grid 在动态内容下更守序）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
