Flex布局实现H5侧边栏抽屉菜单：主内容与侧边栏同级并列于flex容器，.sidebar初始width:0且overflow:hidden，.main-content设flex:1；通过.sidebar-open类切换.sidebar宽度并配合transition实现滑动动画；小屏下默认收起，结合媒体查询与语义化属性提升可访问性。
用 Flex 布局实现 H5 侧边栏抽屉菜单的展开收起，核心是利用 flex 容器的空间分配能力 + 状态切换控制宽度或显隐，不依赖 JavaScript 控制位置，结构清晰、动画自然、响应式友好。
结构设计：主内容与侧边栏同级并列
外层容器设为 display: flex，内部两个直接子元素：左侧 .sidebar 和右侧 .main-content。二者必须平级，不能嵌套，否则无法通过 flex 自动撑开/收缩空间。
-
.sidebar初始设为 width: 0 或 flex: 0 0 0，同时加 overflow: hidden 防止内容溢出 -
.main-content设为 flex: 1，自动占据剩余全部宽度 - 整个容器高度设为 height: 100vh，保证全屏布局基础
CSS 控制展开收起状态
通过一个类名（如 .sidebar-open）切换侧边栏宽度，配合 CSS 过渡实现滑动效果：
- 给
.sidebar添加 transition: width 0.3s ease-in-out - 展开时：
.sidebar-open .sidebar { width: 260px; flex: 0 0 260px; } - 收起时：保持默认
width: 0; flex: 0 0 0;，.main-content仍为flex: 1，自动填满
移动端适配与交互细节
小屏下更强调空间效率，建议结合媒体查询优化行为：
- 在
@media (max-width: 768px)中，默认收起侧边栏（即不加.sidebar-open类） - 点击汉堡按钮时，仅给外层容器添加该类，无需操作 DOM 结构
- 点击遮罩层（可选）或侧边栏外部区域时，移除类名实现收起
- 为避免滚动穿透，展开时给
body加 overflow: hidden
无障碍与可访问性补充
确保功能对键盘和读屏用户可用：
- 汉堡按钮添加 role="button" 和 aria-expanded 属性，随状态更新
- 侧边栏容器加 role="navigation"，并用 aria-label 标明用途
- 展开后，焦点应自动移到侧边栏第一个可聚焦元素（需 JS 辅助，但结构已就绪）
