侧边栏收缩布局实现方法

本文详解了如何使用纯 CSS Flex 布局实现流畅、响应式的侧边栏收缩效果：通过类名切换控制侧边栏 width 与 overflow，配合 transition 实现平滑动画，主内容区设 flex: 1 和 min-width: 0 确保自适应不崩溃，侧边栏内图标与文字借助 opacity 和 width 变化智能显隐，小屏下则无缝退化为汉堡菜单覆盖模式——全程无需 JavaScript 计算尺寸，简洁高效、兼容性强，是现代前端布局中兼顾性能与体验的实用方案。

侧边栏收缩布局用 Flex 实现，核心是利用 flex 的弹性行为 + 类名切换控制宽度，配合 CSS 过渡实现平滑收放效果，无需 JS 计算尺寸。

基础结构：用 flex-direction: row 搭建主-侧布局

容器设为 display: flex，主内容区用 flex: 1 自适应剩余空间，侧边栏设初始宽度（如 width: 260px）并允许收缩：

• 侧边栏不写 flex: 0 0 auto（默认即可），但需加 min-width: 0 防止内容撑宽
• 主内容区必须设 min-width: 0，否则文字或长单词可能破坏收缩逻辑
• 避免在侧边栏上直接写 flex-basis 和 flex-shrink: 0，否则无法压缩

收缩控制：用 class 切换触发宽度变化

定义一个 .sidebar-collapsed 类，只改侧边栏的 width 和 overflow，不碰 flex 属性：

• .sidebar { width: 260px; transition: width 0.3s ease; }
• .sidebar-collapsed { width: 60px; overflow: hidden; }
• JS 只负责增删该 class，不操作 style 或 offsetWidth

图标与文字的响应式显示

侧边栏内元素根据宽度自动显隐，不用媒体查询：

• 文字用 span 包裹，初始 opacity: 1; width: auto;
• 收缩时加 .sidebar-collapsed span { opacity: 0; width: 0; }，再配 overflow: hidden
• 图标保持显示，可加 flex-shrink: 0 防被压缩变形

适配移动端：折叠后隐藏侧边栏

小屏下直接隐藏侧边栏，用汉堡菜单唤出：

• 媒体查询中设 @media (max-width: 768px) { .sidebar { display: none; } }
• 点击按钮时给 body 加 sidebar-open 类，用 position: fixed 覆盖层展示
• 此时 flex 布局退化为主内容区占满全屏，逻辑更清晰

以上就是《侧边栏收缩布局实现方法》的详细内容，更多关于的资料请关注golang学习网公众号！