flex子项高度不一致因父容器缺明确高度基准，需设min-height或height；grid中1fr非强制等高，应避免子项height:100%且用gap替代margin控制间距。
直接用 display: flex 或 display: grid，别碰 float、table-cell 和 columns——前者语义错误，后两者会破坏 DOM 结构或交互逻辑。
为什么 display: flex 子项高度不一致
常见现象是加了 display: flex，但一列内容短、一列超长，视觉上却“没拉齐”。根本不是 flex 失效，而是父容器没提供可参照的高度基准。
- 父容器必须有明确高度上下文：比如
min-height: 300px、height: 100vh，或由外部容器（如html/body）传递高度 - 子项不能写
height、max-height或flex: none，否则会覆盖默认的align-items: stretch - 含
<img>的列需额外处理：img { height: 100%; object-fit: cover; }，否则图片按原始尺寸撑开，破坏拉伸 - IE10–11 需补
display: -ms-flexbox，但align-self行为不稳定，慎用
为什么 grid-template-rows: 1fr 没让列等高
误区在于把 1fr 当作“强制等高指令”。它只是“分配剩余空间”，若某列内容超出可用空间，就会挤压其他列——等高失效的本质是行轨道被撑爆了。
- 真正要等高，应让所有列落在同一网格行内：不设
grid-template-rows，或设为grid-template-rows: auto，由最高列决定行高 - 若用
grid-auto-rows: 1fr，需配合grid-template-columns显式定义列数（如repeat(3, 1fr)），否则子项可能跨行，破坏等高逻辑 - 避免对子项写
height: 100%——它在 grid 中无意义，且常因父级无显式高度而计算为 0 - Firefox 对
minmax(0, 1fr)处理更严格，适合空内容场景；Chrome/Safari 在纯1fr下偶有收缩异常
gap 比 margin 安全得多
在 flex 或 grid 中控制列间距时，gap 是唯一推荐方式。它不参与子项尺寸计算，也不会因子项数量变化导致塌陷或外边距合并。
- 写
gap: 1.5rem就能同时控制行间距和列间距 - 如果还给子项加
margin，会导致实际间距翻倍，且在不同断点下难以预测 - 旧教程常用
margin-right+:nth-child()清除末尾项，现在纯属冗余 - IE 不支持
gap，如需兼容 IE11，可用grid-column-gap/grid-row-gap替代（但不推荐为老浏览器妥协现代布局）
真正难的不是写对那两行 CSS，而是判断哪一层该用 flex、哪一层该用 grid：flex 控制一维流向（比如主内容区内部卡片横向排列），grid 控制二维结构（比如整个页面的 header / sidebar / main / footer）。混用时，别让 grid 项内部再套 flex 容器去“调高度”，那会让行高计算不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
