移动端页面应外层用flex column控制垂直流，main内用flex row实现水平分栏；body设flex-column+min-height:100vh，main设flex:1；侧边栏用flex:0 0 240px，内容区用flex:1+min-width:0；优先用gap而非margin；注意aside语义层级避免无障碍问题。

移动端页面主体结构，用 display: flex 做外层垂直流 + main 内部水平分栏，是最稳、最易维护的组合。别碰 float，也别一上来就写 grid-template-areas。

为什么不能直接给 body 设 display: flex

常见错误是把整个页面塞进一个 flex 容器：结果 header 被拉高、footer 贴不住底、main 高度失控。根本原因是没分层控制流向。

• body 或外层包裹容器设 display: flex; flex-direction: column; min-height: 100vh; —— 这只管“上下堆叠”
• main 单独设 display: flex; flex: 1; —— 这才负责“左右分栏”或“主辅并排”
• 漏掉 flex: 1，main 就不会撑满剩余空间，侧边栏会塌上去

侧边栏固定宽 + 内容区自适应的写法

这是移动端最常见的“抽屉式”或“窄栏辅助”结构。关键不是靠 width 硬卡，而是用 flex 的收缩/增长逻辑来保行为。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 侧边栏写 flex: 0 0 240px（不增长、不收缩、基础宽 240px）
• 内容区写 flex: 1（默认就是 flex: 1 1 auto，够用）
• 必须加 min-width: 0 到内容区——否则含长 URL 或中文连续无空格文本时，flex 不会自动换行或截断，可能撑破容器
• 如果侧边栏要隐藏（比如抽屉菜单），直接 transform: translateX(-100%)，别用 display: none，否则会破坏 flex 布局上下文

用 gap 替代 margin 控制间距

在 flex 容器里，子元素之间用 gap 是最干净的方案。用 margin 容易触发 margin 合并，尤其在响应式切换时，上下 padding/gap 行为不一致。

• gap: 16px 同时作用于主轴和交叉轴，比分别写 margin-right 和 margin-bottom 更可靠
• 旧版 Android WebView（Chrome 85 以前）不支持 gap，可 fallback：margin + :first-child 重置首项
• 不要在 flex 子项上同时设 margin 和 gap，行为不可控，尤其在 Safari 中

真正容易被忽略的是语义层级：移动端屏幕窄，aside 如果放在 main 外面，它可能被读屏器误判为全局导航；而放在 main 内部，又得小心它是否真属于当前页面内容。布局代码写对了，结构语义错了，照样在无障碍测试里翻车。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！