Flex布局实现后台侧边栏需理清结构与行为：侧边栏作为flex子项设flex: 0 0 240px，主内容区设flex: 1并独立滚动；语义化标签（、）配合sticky定位、aria-current高亮及移动端抽屉式切换，禁用fixed避免脱离文档流。

用 Flex 布局实现后台管理面板侧边栏，核心不是“堆样式”，而是理清结构关系和行为边界：侧边栏必须作为 flex 子项参与宽度计算，主内容区要能自动避让、滚动独立、状态可维护。

结构语义化 + Flex 容器统一控制

先用语义标签搭骨架，再靠 Flex 分配空间：

• 外层用 <div class="layout"> 或 <code><section></section> 作 flex 容器，设 display: flex; min-height: 100vh;
• 侧边栏用 <aside></aside> 包裹，内部加 <nav aria-label="主菜单"></nav>，确保读屏器识别
• 主内容区用 <main></main> 标签，不写 margin-left，不浮动，不 fixed
• 避免把 logo、搜索框、用户头像全塞进 <aside></aside>——它们属于顶部栏，应另起结构

侧边栏固定宽度 + 主内容自适应（不塌不溢）

关键在 flex 属性组合，不是 width + margin：


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 侧边栏写 flex: 0 0 240px;（不放大、不缩小、基准宽 240px），比 width: 240px 更稳，防内容撑开
• 主内容区写 flex: 1; overflow-y: auto; box-sizing: border-box;
• 若侧边栏有 padding/border，务必加 box-sizing: border-box;，否则总宽超预期
• 父容器必须有高度来源，如 min-height: 100vh;，否则 flex 无法按比例分配

滚动固定 + 无障碍高亮

让菜单始终可见，且当前页状态清晰可访问：

立即学习“前端免费学习笔记（深入）”；

• 给 <aside></aside> 加 position: sticky; top: 0;，它的直接父元素需满足：min-height: 100vh 且无 overflow: hidden/auto
• 菜单项用 <a href="/user/list" aria-current="page">用户管理</a>，服务端或构建时注入 aria-current
• CSS 写 a[aria-current="page"] { background: #007bff; color: white; }，比纯 .active 更可靠、更无障碍
• 禁用 position: fixed——它会让侧边栏脱离文档流，主内容无法感知其存在，iOS 动画还容易卡顿

移动端收起 + 抽屉式展开

不是简单 display:none，而是保持交互完整性和视觉反馈：

• 默认隐藏：给 <aside></aside> 加 transform: translateX(-100%); 和 transition: transform 0.3s ease;
• 用 <input type="checkbox" id="sidebar-toggle"> 配合 <label for="sidebar-toggle"></label> 触发，无需 JS 也能切换
• 桌面端媒体查询中取消 translate，并设 position: static;，恢复正常布局流
• Overlay 层必须覆盖整个视口，点击它要能关闭菜单——事件绑定在 overlay 元素上，且阻止冒泡，避免点到菜单内部也触发关闭