使用Flexbox可高效实现主内容区域自适应高度。1. 将容器设为display: flex并设置flex-direction: column，使子元素按列排列；2. 通过min-height: 100vh确保容器占满视口高度；3. 头部和底部设固定高度且flex-shrink: 0防止压缩；4. 主内容main设置flex-grow: 1，自动填充剩余空间；5. 可在main内部使用align-items和justify-content控制内容对齐方式；6. 确保html和body有足够高度（如min-height: 100%），避免高度传递中断。该方法兼容现代浏览器，结构清晰，维护简单。
要实现网页主内容区域的自适应高度，使用 Flexbox 是目前最简洁高效的方式。通过 flex-grow 和 align-items 等属性，可以轻松让主内容填满剩余空间，同时保持整体布局的灵活性。
1. 使用 Flexbox 构建自适应布局结构
将页面整体设为 flex 容器，使子元素（如头部、主内容、底部）能根据可用空间自动调整。关键在于设置容器的 display: flex 和方向为垂直（flex-direction: column）。
示例结构：
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 占满视口高度 */
}
header, footer {
flex-shrink: 0;
height: 60px; /* 固定头尾高度 */
}
main {
flex-grow: 1; /* 主内容占满剩余空间 */
}
2. flex-grow 让主内容填充剩余高度
flex-grow 属性定义了元素在容器中有剩余空间时的扩展能力。给 main 设置 flex-grow: 1，它会自动拉伸，占据除头尾外的所有空间。
3. align-items 控制主内容的横向对齐方式
align-items 用于控制主轴交叉方向（垂直布局下为水平方向）的对齐。它不影响高度自适应，但影响内容在主区域内的对齐表现。
立即学习“前端免费学习笔记（深入）”；
- stretch：默认值，子元素宽度拉满（除非设置了固定宽度）
- center：水平居中，适合居中卡片或表单
- flex-start 或 flex-end：靠左或靠右对齐
例如让主内容区内部元素居中：
main {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
4. 实际应用中的注意事项
确保根元素和容器的高度传递正确，避免因父级未设高而导致 flex 失效。
关键点：- html 和 body 建议设置 min-height: 100% 或 height: 100%
- 使用 min-height: 100vh 可防止内容少时布局塌陷
- 避免给 main 设置固定高度，否则会覆盖 flex-grow 行为
基本上就这些。用 flex-grow 撑开主内容，配合 align-items 控制对齐，就能实现干净的自适应高度布局，兼容现代浏览器，代码也清晰易维护。
