align-items: baseline 不能实现等高行，因为它仅对齐子元素基线而不改变容器高度计算；真等高应使用 flex 的 stretch 或 grid 的 1fr。
align-items: baseline 为什么不能直接撑开等高行
基线对齐（align-items: baseline）只控制子元素的基线位置，不改变容器高度计算逻辑——它不会让所有子项“拉齐到最高项的高度”，而是让各自文字基线对齐，上下留白仍由自身内容决定。所以用它做“等高行”，实际只是视觉错觉，一旦某列有 padding、font-size 差异或图标，基线就偏移，行高立刻参差不齐。
真正可靠的等高行方案：flex + align-items: stretch
Flex 容器默认就是 align-items: stretch，子项在交叉轴（通常是垂直方向）会自动拉伸填满容器高度。只要父容器高度可算（比如设了 min-height 或被内容撑开），就能实现真等高。
- 必须给父容器设
display: flex，且子项不能设align-self: auto或固定高度（如height: 100px） - 避免子项内使用
vertical-align（它对 flex 子项无效，但可能干扰你调试判断） - 如果子项里有图片或按钮，默认
vertical-align: baseline会导致底部不对齐，统一改成vertical-align: top或用align-self: flex-start
.row {
display: flex;
}
.cell {
flex: 1; /* 均分宽度 */
padding: 12px;
}兼容老浏览器时别硬扛 baseline
IE10–11 对 align-items: baseline 的实现和现代浏览器不一致，尤其遇到 line-height 不同或混合 inline 元素时，基线位置常错位。这时候强行用 baseline 模拟等高，不如退一步用表格布局（display: table / table-cell），它在 IE8+ 都稳定支持等高，且语义清晰。
-
display: table父容器需设table-layout: fixed才能更好控宽 -
display: table-cell子项天然等高，但无法响应式断行（flex可以用flex-wrap） - 若项目必须支持 IE9 及以下，
display: table是目前最省心的选择
Grid 布局更干净，但要注意隐式轨道
CSS Grid 的 grid-template-rows: 1fr 能让所有行高一致，但「等高列」其实是靠 grid-auto-rows 或显式定义行高实现的。常见错误是只写 display: grid 却没设行高，结果每行还是按内容自适应。
立即学习“前端免费学习笔记（深入）”；
- 单行多列等高：用
display: grid; grid-template-rows: 1fr; - 多行都等高：改用
grid-auto-rows: 1fr，但注意这会影响所有隐式生成的行 - Grid 在 Safari 15.4 之前对
1fr在嵌套 grid 中的计算有 bug，测试时别漏掉这个版本
基线对齐不是等高工具，它是排版细节控制手段；真要等高，就该交给 flex 的 stretch 或 grid 的 fr —— 别用错地方，也别为兼容性过早放弃现代方案。
