flex布局中align-items: stretch默认生效，三栏等高需父容器有明确高度或内容撑开；CSS Grid更轻量，子项天然等高且不依赖父容器高度。
flex 布局中 align-items: stretch 默认就生效
三栏等高不需要额外写 align-items: stretch —— 它是 flex-direction: row 下的默认值。只要父容器设了 display: flex，子项高度自动拉伸到容器最大高度（前提是子项没设置固定高度或 align-self 覆盖）。
三栏等高必须保证父容器有明确高度或内容撑开
常见失效原因是父容器高度为 auto 且内部子项都没内容或高度不一致，导致“拉伸”无参考基准。此时 align-items: stretch 没效果。
- 如果父容器本身没高度，可以加
min-height: 100vh或用内容自然撑开 - 避免给任意一栏设
height或max-height，否则会限制拉伸 - 检查是否有
align-self: flex-start等覆盖了默认拉伸行为
完整可运行的三栏等高代码示例
.container {
display: flex;
/* align-items: stretch; ← 这行可省略 */
}
.column {
flex: 1;
padding: 1rem;
border: 1px solid #ccc;
}
/* 以下任一方式都能让三栏视觉等高 */
/* 方式1：靠内容最少的栏被拉伸 */
/* 方式2：父容器加 min-height: 300px */
比 flex 更轻量的替代方案：CSS Grid
如果只是静态三栏，display: grid 更直接：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
/* 所有子项天然等高，无需对齐控制 */
}
Grid 不依赖父容器高度、不关心子项内容差异，语义更清晰。但旧版 Safari（subgrid 或复杂轨道函数支持弱，纯三栏布局无兼容问题。
立即学习“前端免费学习笔记（深入）”；
实际项目里，flex 和 grid 都能搞定，但容易卡在父容器没高度、某栏写了 height、或者误加了 align-self: center 这类覆盖默认行为的样式。
