首先使用Flexbox创建弹性布局，侧边栏固定宽度，主内容区自适应；然后通过媒体查询在屏幕小于768px时缩小侧边栏至80px；最后添加过渡动画和可切换类实现移动端交互，完成响应式侧边导航。
在现代网页设计中，响应式侧边导航是常见需求。通过结合CSS媒体查询和Flexbox布局，可以轻松实现一个在不同设备上自动调整宽度的侧边栏。
使用Flexbox构建基础布局
页面主体采用Flexbox可以让侧边栏和内容区灵活分配空间。将容器设为display: flex，侧边栏设置固定宽度（如250px），主内容区占据剩余空间。
- 父容器使用display: flex开启弹性布局
- 侧边栏设置flex: 0 0 250px防止缩放并保持初始宽度
- 主内容区使用flex: 1自动填充剩余区域
示例代码：
.container {display: flex;
}
.sidebar {
flex: 0 0 250px;
background-color: #333;
}
.main-content {
flex: 1;
padding: 20px;
}
用媒体查询适配小屏幕
当屏幕变窄时，可以通过媒体查询调整侧边栏行为。例如，在小于768px的设备上将其宽度缩小或隐藏，提升移动端体验。
立即学习“前端免费学习笔记（深入）”；
- 设置断点，如@media (max-width: 768px)
- 将侧边栏宽度改为更小值（如80px）或完全隐藏
- 可配合transform实现滑动效果，或添加按钮控制显隐
响应式调整示例：
@media (max-width: 768px) {.sidebar {
flex: 0 0 80px;
}
.main-content {
padding: 15px;
}
}
增强交互性：可切换的侧边栏
在移动端，常需要点击按钮展开或收起侧边栏。可通过CSS类切换实现，无需JavaScript也可用:target伪类简单控制。
- 定义一个.collapsed类，将侧边栏宽度设为0或极小值
- 使用JavaScript添加/移除类，或利用锚点链接触发:target
- 加上transition实现平滑动画效果
添加过渡动画：
.sidebar {transition: flex 0.3s ease;
} 基本上就这些。用Flexbox控制结构，媒体查询适配尺寸，再加一点交互细节，就能做出实用的响应式侧边导航。关键是合理设置断点和灵活运用弹性布局特性。
