使用Flexbox的flex-wrap与CSS transition实现响应式侧边栏折叠菜单，无需JavaScript；2. 页面结构由aside和main组成，布局容器设为flex并允许换行；3. 侧边栏默认宽度250px，hover或点击时通过改变宽度至60px实现折叠动画；4. 移动端通过媒体查询设置侧边栏全宽并换行显示，主内容区顺序前移；5. 动画优化采用cubic-bezier缓动函数及多属性过渡，提升视觉流畅度。
响应式侧边栏折叠菜单是现代网页布局中常见的需求，尤其在管理后台或仪表盘类应用中。通过结合 Flexbox 的 flex-wrap 特性与 CSS transition 动画，可以实现一个平滑、自适应且无需 JavaScript 的折叠效果。以下是具体实现方法。
结构设计：使用 Flex 布局搭建主框架
页面整体采用 flex 容器，主内容区与侧边栏并排显示，利用 flex-wrap: wrap 实现小屏幕下的自动换行。
HTML 结构示例：<div class="layout"> <aside class="sidebar">菜单项</aside><main class="content">主内容</main> </div>
CSS 设置容器为 flex，并允许换行：
.layout {
display: flex;
flex-wrap: wrap;
min-height: 100vh;
}
.sidebar {
width: 250px;
background: #333;
color: white;
transition: width 0.3s ease;
}
.content {
flex: 1;
padding: 20px;
background: #f4f4f4;
}
实现折叠：hover 或 class 控制宽度变化
当用户悬停或点击触发时，改变侧边栏的宽度，配合 transition 实现动画效果。
例如，添加 hover 折叠功能：
.sidebar:hover {
width: 60px;
}
.sidebar:hover::after {
content: "菜";
display: block;
text-align: center;
font-size: 12px;
}
也可通过 JavaScript 切换 class 实现点击控制：
.sidebar.collapsed {
width: 60px;
}
此时菜单文字隐藏，仅保留图标或首字，提升空间利用率。
响应式适配：移动端自动折叠
在小屏幕上，利用媒体查询让侧边栏默认 collapsed，并通过 flex-wrap 换行避免溢出。
@media (max-width: 768px) {
.sidebar {
width: 100%;
border-bottom: 1px solid #444;
}
.content {
order: -1; /* 主内容上移 */
}
}
移动端可结合按钮切换 collapsed 状态，保持界面整洁。
动画优化：提升交互体验
transition 可作用于多个属性，使视觉更自然：
- 设置 width 和 transform 过渡
- 调整 ease-in-out 缓动函数
- 对内部菜单项添加延迟动画（如 fade 或位移）
示例：
.sidebar {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
基本上就这些。利用 flex-wrap 的弹性换行能力与 transition 的流畅动画，无需复杂脚本也能构建出实用的响应式侧边栏。关键是结构清晰、样式渐进，兼顾桌面与移动体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
