Flex 和 Grid 均可实现等高列：Flex 依赖父容器 display: flex + align-items: stretch（默认）；Grid 依赖 fr 单位列轨道 + align-items: stretch（默认），二者均忌设 height 覆盖拉伸。
flex 实现等高列：align-items 默认就管用
Flex 布局下，只要父容器设为 display: flex，子项默认就会等高——这是 align-items 的默认值 stretch 在起作用，无需额外设置。
常见错误是忘了给父容器加 display: flex，或误加了 align-items: flex-start 导致高度不一致。
- 父容器必须设
display: flex（不能只靠flex-direction: column） - 子项不能强制设置
height或min-height覆盖拉伸行为 - 若子项含
margin或padding，等高指的是内容盒（content box）拉伸，视觉上可能有差异
.container {
display: flex;
}
.column {
flex: 1; /* 可选：均分宽度 */
}
grid 实现等高列：fr 单位 + align-items 自动对齐
Grid 中，等高列更直观：只要列轨道用 fr 或固定单位定义，且行轨道未显式限制高度，子项在各自网格区域中默认拉伸填满——本质由 align-items: stretch 控制。
容易踩的坑是设置了 grid-auto-rows: auto 却忘了子项本身没内容撑开，导致“看起来不等高”；其实它们高度一致，只是背景色没显示出来。
- 推荐用
grid-template-columns: 1fr 1fr 1fr定义等宽等高列 - 避免对子项单独设
height: 100%，Grid 下多数不需要 - 若需兼容老版本 Safari（align-items: stretch 在某些嵌套场景下失效，可加
min-height: 0到子项防 collapse
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.column {
min-height: 0; /* 兼容旧 Safari */
}
flex vs grid：选哪个更稳？
单纯等高列，两者都可靠；但实际项目中，grid 更适合二维布局（比如带页眉/侧边栏/主内容的响应式结构），flex 更适合一维流式排列（如导航条、卡片列表）。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
性能上无明显差异，但 grid 的隐式轨道和 subgrid（新特性）在复杂嵌套时更可控；flex 的 flex-wrap 对响应式换行支持更好。
- 如果列数固定、结构清晰 → 优先用
grid - 如果要支持 IE11 → 只能用
flex（需加-ms-前缀） - 如果列内还要垂直居中文字 →
flex子项再套一层display: flex更直接
等高 ≠ 等内容高度：注意溢出与截断
等高列解决的是容器高度对齐，不是内容高度一致。当某列文字远多于其他列时，会出现空白或滚动，这时候得配合内容处理逻辑。
- 用
overflow: hidden+text-overflow: ellipsis截断过长文本（需配合white-space: nowrap和固定宽） - 避免在等高列里用
height: 100vh，它会破坏 flex/grid 的拉伸计算 - 服务端渲染或 SSR 场景下，CSS 尚未加载时可能出现闪动，建议加
min-height保底
最常被忽略的是：等高列在打印样式（@media print）中默认失效，需要单独重写 display: block 并手动处理高度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
