等高布局需依赖Flex或Grid机制实现：Flex中align-items: stretch（默认）使子项在交叉轴自动拉伸，但要求父容器有高度或子项无高度约束；Grid中align-items: stretch配合grid-auto-rows可实现单行或多行等高；禁用height: 100%等依赖祖先高度的方案。
等高布局的本质是脱离自然文档流
当多个并列容器（比如 .item）内容高度不一致时，视觉上会出现参差错落。CSS 本身没有“让所有子项自动拉伸到最高项高度”的原生属性，所谓“等高”必须靠机制干预：要么用 display: flex 让父容器成为弹性上下文，要么用 display: grid 定义显式轨道，要么用 float + 负 margin（已淘汰）或 JS 补齐（不推荐）。现代方案只应聚焦前两者。
flex 布局中 align-items 是关键开关
默认情况下 align-items: stretch 就会让子项在交叉轴（通常是垂直方向）自动填满容器高度——但前提是父容器有明确高度，或子项自身没设置 height、min-height 等强制约束。常见失效场景：
- 父容器未设
height或min-height，且子项内容过少，导致整体高度塌缩 - 某个子项写了
align-self: flex-start，覆盖了父级的align-items - 子项内部用了
position: absolute，脱离了 flex 项的拉伸逻辑
正确写法示例：
.container {
display: flex;
align-items: stretch; /* 默认值，可省略 */
}
.item {
flex: 1; /* 允许等宽并等高 */
}grid 布局用 align-items 或 align-content 控制对齐
Grid 更适合明确行列结构的等高需求。如果所有子项放在同一行（grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))），只需设置 align-items: stretch；若有多行且希望每行内部等高，则需配合 grid-auto-rows: 1fr 或显式定义行高。
立即学习“前端免费学习笔记（深入）”；
注意：align-content 控制的是多行之间的对齐方式（如居中、拉伸），不影响单行内子项高度；真正控制单个网格项高度的是 align-items 和项自身的 align-self。
典型配置：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
grid-auto-rows: minmax(min-content, max-content);
}不要用 height: 100% 强行拉伸
这是最常踩的坑：给子项设 height: 100%，却没确保所有父级（包括 html、body）都有显式高度。这种链式依赖极易断裂，且在响应式场景下会破坏内容自适应。Flex/Grid 的 stretch 行为是布局引擎内置逻辑，不依赖祖先高度声明，稳定性远高于百分比高度。
另外，min-height: 100vh 看似能撑开，但它基于视口而非容器，一旦父容器有 padding/margin 或滚动容器限制，就会错位。等高必须锚定在布局上下文内部，而不是全局视口。
