Flex中align-items: stretch在flex-wrap: wrap下仅对单行内生效，无法跨行等高；真正等高需用CSS Grid（align-items: stretch跨行有效）或JS动态设置高度。
flex 容器设了 align-items: stretch 但卡片还是不等高
常见原因是父容器没设高度约束，或子项自身设置了 height、min-height、max-height 等覆盖了拉伸行为。另外，flex-wrap: wrap 会把子项分多行排列，而 align-items 只作用于**单行内**的交叉轴对齐 —— 换句话说，第二行的卡片不会被第一行的高度“拉高”。
flex-wrap 下实现真正等高必须靠 JavaScript 或 CSS Grid
CSS Flexbox 本身不支持跨行等高；align-items: stretch 在 flex-wrap: wrap 时只对每行内部生效。如果必须用 Flex，可考虑以下折中方案：
- 强制单行显示（
flex-wrap: nowrap），配合横向滚动或媒体查询限制卡片数 - 改用
display: grid，用grid-template-rows: 1fr或align-items: stretch（Grid 中该属性跨行有效） - 用 JS 动态读取最高卡片的
offsetHeight，再统一设给所有同级卡片（适合卡片数量少、不频繁重排的场景）
用 CSS Grid 替代 flex-wrap 实现可靠等高
Grid 天然支持跨轨道拉伸，且语义更清晰。关键点是避免显式设置行高，让所有卡片在同一个隐式行轨道中自动拉伸：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
align-items: stretch; /* 这里才真正跨行生效 */
}
.card-grid > {
min-height: 0; / 防止内容溢出破坏拉伸（尤其含图片/iframe时） */
}
注意：min-height: 0 很重要 —— 否则某些浏览器下卡片可能因内部元素（如图片）默认最小尺寸而拒绝收缩/拉伸。
立即学习“前端免费学习笔记（深入）”；
如果非要用 Flex + wrap，只能接受“行内等高”
这是 Flex 的设计限制，不是 bug。你可以利用它做视觉优化，比如：
- 用
align-content: flex-start让各行顶部对齐（避免空隙参差） - 给卡片加
margin-bottom: auto，让内容短的卡片底部留白一致 - 避免在卡片内用
position: absolute或transform破坏 flex 布局流
真正需要跨行等高的场景，别硬扛 Flex —— Grid 或 JS 是更可控的选择。最容易被忽略的是：开发者常以为 align-items: stretch 在 wrap 下仍全局有效，其实它连“当前行”的高度都依赖该行最高子项的原始高度，而这个高度又受字体、padding、border-box 影响，非常容易误判。
