使用 Flex 与 Grid 结合实现响应式布局，.container 设为 flex 容器使侧边栏与主内容并排且等高；.main-content 用 grid 管理内部模块，自动换行适应屏幕；侧边栏固定宽，主区自适应；@media 控制小屏下堆叠显示，提升移动端体验。
在现代网页布局中，侧边栏与主内容区域的排布非常常见。使用 Flex 与 Grid 相结合的方式，可以灵活地构建结构清晰、响应式良好的页面布局。下面介绍一种实用的实现方式。
整体结构采用 Flex 布局
将页面最外层容器设置为 Flex 容器，让侧边栏和主内容区并排排列，同时保持整体高度一致。
.container {
display: flex;
min-height: 100vh;
}
这样可以让侧边栏和主内容区始终撑满视口高度，避免高度不一致的问题。
主内容区使用 Grid 实现内部复杂布局
主内容区域通常包含多个模块，比如标题、卡片、表格等，适合用 CSS Grid 进行二维布局管理。
立即学习“前端免费学习笔记（深入）”；
.main-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
flex: 1;
}
这里利用 Grid 的自动填充功能，使子元素根据屏幕宽度自适应换行，提升响应式体验。
侧边栏固定宽度，主内容自适应伸缩
侧边栏可设为固定宽度，主内容区域使用 flex: 1 自动占据剩余空间。
.sidebar {
width: 240px;
background-color: #f4f4f4;
padding: 20px;
}
.main-content {
flex: 1;
}
这种组合既保证了侧边栏稳定，又让主区域充分利用空间。
响应式处理：小屏幕下切换为垂直堆叠
在移动端，可通过媒体查询关闭 Flex 排列，让侧边栏置于上方或隐藏。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
}
}
此时整个布局变为上下结构，更适合小屏幕阅读。
基本上就这些。通过 Flex 控制大块区域分布，Grid 管理局部网格，两者互补，能高效实现现代化页面布局。不复杂但容易忽略的是高度对齐与断点控制，合理搭配才能兼顾美观与可用性。
