使用Flexbox布局实现侧边栏与内容区并排，侧边栏固定宽度，内容区自适应；2. 通过媒体查询在小屏幕下隐藏侧边栏，添加.collapsed类时以固定定位显示；3. 结合JavaScript切换类控制显隐，配合按钮实现折叠交互，确保z-index和定位正确，完成响应式侧边栏系统。
要在CSS中实现侧边栏折叠与内容区域自动适配，可以结合 Flexbox 布局和媒体查询（media queries）来完成。这种方式在响应式设计中非常实用，尤其适用于移动端和桌面端不同视图的切换。
使用 Flexbox 构建基础布局
Flexbox 能让容器内的子元素灵活分配空间。我们可以用它来创建一个主内容区和侧边栏并排的布局，并确保它们能根据容器大小自动调整。
HTML 结构示例：
CSS 设置：
.layout {display: flex;
height: 100vh;
}
.sidebar {
width: 250px;
background: #333;
color: white;
padding: 20px;
}
.content {
flex: 1;
background: #f4f4f4;
padding: 20px;
}
这样，侧边栏固定宽度，主内容区占据剩余空间，布局简洁且自适应。
通过 media queries 实现折叠效果
在小屏幕设备上，我们希望隐藏侧边栏或将其变为可折叠状态。利用媒体查询，可以在特定屏幕宽度下修改样式。
例如，在屏幕小于 768px 时隐藏侧边栏：
.sidebar {
display: none;
}
.layout.collapsed .sidebar {
display: block;
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
z-index: 1000;
}
.content {
flex: 1;
}
}
配合 JavaScript 控制 .layout 是否添加 .collapsed 类，即可实现点击按钮展开/收起侧边栏。
添加切换按钮增强交互性
加入一个按钮用于控制侧边栏显示状态：
JavaScript 示例：
document.querySelector('.toggle-btn').addEventListener('click', function() {document.querySelector('.layout').classList.toggle('collapsed');
});
在小屏幕上点击按钮即可展开侧边栏，再次点击收起，提升移动体验。
基本上就这些。通过 Flexbox 提供弹性布局，再用 media queries 根据屏幕尺寸调整显示方式，就能实现一个既美观又实用的响应式侧边栏系统。不复杂但容易忽略细节，比如 z-index 和固定定位的配合使用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
