使用Flexbox实现弹性侧边栏最简单高效，父容器设display: flex，侧边栏固定宽度，主内容区用flex: 1自适应，配合媒体查询可实现响应式布局。
实现弹性侧边栏布局，最简单高效的方式是使用 CSS 的 Flexbox 布局。它能让侧边栏和主内容区自动适应容器空间，无需计算具体宽度，兼容性好且代码简洁。
基本结构与 HTML 示例
先构建页面的基本结构：
使用 Flexbox 实现弹性布局
通过设置父容器为 flex 布局，让主内容区自动伸展，侧边栏保持固定宽度（或比例）。
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
.layout {display: flex;
height: 100vh; /* 占满视口高度 */
}
.sidebar {
width: 240px; / 固定宽度侧边栏 /
background-color: #f4f4f4;
padding: 20px;
}
.main-content {
flex: 1; / 自动占据剩余空间 /
padding: 20px;
background-color: #fff;
}
更灵活的响应式调整
如果希望在小屏幕上侧边栏隐藏或变为顶部导航，可以加入媒体查询：
.layout {
flex-direction: column;
}
.sidebar {
width: 100%;
height: 60px;
}
}
这样在移动设备上，侧边栏会变成顶部导航条，主内容区自然向下排列。
可选：使用 CSS Grid 实现类似效果
你也可以用 Grid 布局实现同样的弹性侧边栏：
.layout-grid {display: grid;
grid-template-columns: 240px 1fr; /* 第一列固定，第二列自适应 */
height: 100vh;
}
这种方式更直观，适合复杂网格场景，但在老版本浏览器中支持略差于 Flexbox。
基本上就这些。用 Flexbox 实现弹性侧边栏简单可靠，配合响应式设计能适配各种设备。关键是父容器设为 flex，主区域用 flex: 1 占据剩余空间。不复杂但容易忽略细节，比如高度设置和溢出处理。
