使用 Flexbox 实现侧边栏与主内容等高布局，只需将父容器设为 display: flex，子元素会自动沿交叉轴拉伸。1. 父容器设置 display: flex 后，子元素默认等高；2. align-items: stretch 为默认行为，无需额外设置；3. 确保父容器有明确高度或 min-height: 100vh，避免子元素设置 height: 100% 或 overflow: hidden；4. 适用于后台管理、文章页等场景，结构简洁且兼容性好。
要实现侧边栏与主内容等高布局，使用 Flexbox 是最简单高效的方法。通过 align-items 和正确的 height 设置，可以让子元素自动拉伸到相同高度。
1. 使用 Flexbox 实现等高布局
将父容器设为 display: flex，其子元素（如侧边栏和主内容）会默认沿交叉轴拉伸，高度保持一致。
关键点：- 父容器设置 display: flex
- 子元素无需额外设置高度，会自动等高
- 默认 align-items: stretch 已满足需求
示例代码：
.container {
display: flex;
}
.sidebar {
width: 200px;
background: #f0f0f0;
}
.main-content {
flex: 1;
background: #fff;
}
2. align-items 的作用
align-items 控制子元素在交叉轴上的对齐方式。默认值 stretch 会让子元素填满容器高度，实现等高。
立即学习“前端免费学习笔记（深入）”；
常用值说明：- stretch：子元素拉伸至容器高度（默认，适合等高）
- flex-start：顶部对齐，可能高度不一致
- center：居中对齐，仍会拉伸（除非设置了固定高度）
一般保持默认即可，无需显式设置 align-items: stretch。
3. height 设置注意事项
确保父容器有明确的高度或能自然撑开。常见情况：
- 父容器无高度时，Flex 子元素按内容高度拉伸，仍等高
- 若父容器设了 height: 100vh，子元素会占满视口
- 避免给子元素设置 height: 100%，可能破坏 Flex 行为
- 不要给子元素设置 overflow: hidden 除非必要
如果页面整体需要最小高度，可对 html, body 设置 min-height: 100vh。
4. 实际应用场景
适用于后台管理系统、文章页侧边推荐等场景。例如：
<div class="layout"> <aside class="sidebar">导航菜单</aside> <main class="main-content">文章内容很长...</main> </div>
即使侧边栏内容少，也会和主内容一样高，视觉整齐。
基本上就这些。用 Flexbox 做等高布局，关键是把容器设为 flex，其他交给浏览器处理。不复杂但容易忽略细节。
