flex-wrap换行后卡片高度不一并非浏览器bug，而是align-items: stretch在父容器height: auto时失效所致；此时卡片按内容自适应高度，导致网格错乱。
为什么 flex-wrap 换行后卡片高度参差不齐
不是浏览器 bug，而是 align-items: stretch 默认行为在无高度约束时“失效”了：父容器 height: auto 时，它没有交叉轴空间可拉伸，每张卡片只能按自己内容撑高。哪怕你写了 align-items: stretch，只要父容器没明确高度参考（比如 min-height 或被上层 flex: 1 带动），所有子项就各自为政。
常见错误现象包括：同一行内按钮位置高低不一、换行后第二行整体下沉、文字多的卡片把整行顶高，破坏网格感。
- 用开发者工具检查父容器的
Computed height—— 如果是auto或0px，就是根源 - 子项里写了
height、min-height或max-height？哪怕只有一张卡片这么写，它就退出等高队列 -
这类替换元素默认按基线对齐，底部留白，视觉上比文字项矮
让换行后各行顶部对齐的关键设置
放弃依赖 stretch，改用更可控的 align-items: flex-start + 统一基础尺寸，这是多数卡片网格最稳的解法。
- 给父容器加
align-items: flex-start，确保每行内所有卡片从顶部开始排列 - 每个卡片加统一
min-height（如min-height: 200px），兜住文字行数差异和图片尺寸浮动 - 卡片内部若需按钮沉底，用
display: flex; flex-direction: column+margin-top: auto，别靠align-self: flex-end - 禁用可能干扰的样式：移除子项上的
float、position: absolute，它们会让父容器塌陷
多行之间错位？检查 align-content 是否生效
align-content 管的是“行与行”的分布，不是单个卡片。但它非常容易被忽略——因为三个条件缺一不可：
- 父容器必须有明确高度：比如
min-height: 400px或嵌套在flex: 1容器中 -
flex-wrap: wrap必须实际触发换行（子项总宽度 > 容器宽度） - 不能有子项设置了
align-self: flex-start等覆盖值，否则会干扰行级对齐逻辑
真要用 align-content，优先选 flex-start（所有行顶部对齐，空隙留在底部），而不是 stretch（各行列高被不均拉伸，反而更乱）。
更稳妥的替代方案：用 Grid 替代 Flex 多行卡片
Flex 的 align-items 只作用于单行，跨行等高本质是“伪需求”。Grid 天然支持同列等高，且无需高度硬编码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
这种写法下，同一列的所有卡片自动等高，不管内容多少、换几行，按钮位置天然一致。如果还要兼容 IE11，才需要退回到 display: -ms-grid 或降级为单列流式布局。
真正容易被忽略的是：卡片内部文字溢出没截断。哪怕对齐全设对了，white-space: normal + 缺少 overflow: hidden + text-overflow: ellipsis（配合 display: -webkit-box）也会让长文本顶高卡片，前面所有设置都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
