最稳妥方式是左侧设flex: 0 0 240px（不伸缩、固定宽），右侧设flex: 1 1 auto（占剩余空间且可收缩）；必须显式指定flex-basis，避免内容宽度干扰比例，同时优先使用语义标签和确保无障碍与SEO正确性。

用 display: flex 布局主次区域时，flex-grow 和 flex-shrink 怎么配比

主次内容区域（比如左侧导航栏 + 右侧主面板）最稳妥的实现方式是 Flexbox，但直接写 flex-grow: 1 和 flex-grow: 3 往往会翻车——因为没考虑初始宽度和压缩行为。

常见错误现象：.sidebar 在小屏下被压成一条细线、.main-content 文字换行错乱、滚动条突然出现又消失。

• flex-basis 必须显式设值（如 240px 或 20rem），否则浏览器按内容宽度计算，导致比例失真
• 推荐写法：.sidebar { flex: 0 0 240px; }（不伸展、不收缩、固定宽）；.main-content { flex: 1 1 auto; }（剩余空间全占，且可收缩）
• 避免用 flex: 1 简写——它等价于 flex: 1 1 0%，会把 flex-basis 强制归零，引发高度塌陷或文字挤叠

和

的语义边界在哪

很多人把侧边栏硬塞进

里，或者反过来用

包主内容，结果 SEO 权重错配、屏幕阅读器跳过关键区块。

使用场景很明确：

必须唯一，且只包裹当前页面“不可替代”的核心内容（如表单操作区、数据看板、编辑器）；

是可移除的辅助信息（如筛选条件面板、操作快捷入口、实时通知栏）。

• 可以出现在
  内部（如文章页右侧的“目录导航”），也可以在
  外部（如全局左侧菜单）
• 如果侧边栏承载的是系统级功能（如权限控制、用户切换），建议放在 直接子级，与
  并列，而非嵌套
• 不要用
  替代
  ——前者强调主题独立性（如“销售报表”区块），后者强调内容从属性

响应式断点下，主次区域怎么切换布局模式

纯 Flex 横向布局在移动端撑不开，强行堆叠又丢失导航上下文。这时候不能只靠 @media 改 flex-direction，得配合 DOM 结构微调。

DeepBI DHTML 页面生成器

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

下载

性能影响明显：在小屏上保留左侧

但设为 display: none，会导致 JS 仍要解析、渲染引擎仍分配布局空间。

• 推荐方案：用 display: contents（支持度 ≥ Chrome 65 / Safari 15.4）让
  在小屏下“消失”但不破坏语义流
• 更兼容的做法：用 position: fixed + transform: translateX(-100%) 隐藏侧边栏，再用 JS 控制类名切换，避免重排
• 别在 @media 里反复改 flex 的三个参数——先定好基础值（如 flex: 0 0 240px），断点内只改 flex-basis 或切为 flex-direction: column

为什么不用

而坚持用语义标签

表面看只是换了个标签名，实际影响 CSS 维护成本、无障碍识别率和 SSR 渲染逻辑。

容易踩的坑：某天想给所有主内容区加统一 max-width，结果发现有的叫 .content、有的叫 .main-area、还有的是 #primary，最后写了七八条选择器，且无法用 main 伪类做全局样式复位。

• 浏览器默认有 role="main"，
  对应 role="complementary"，屏幕阅读器能直接跳转，而 div 需手动补 ARIA 属性
• SEO 工具（如 Lighthouse）会将无语义 div 视为“结构模糊”，降低内容可信度评分
• 后续接入 Web Components 或微前端时，语义标签更容易被框架识别为 slot 插槽锚点

真正难的不是写出能跑的布局，而是让主次区域在不同设备、不同读屏模式、不同 SEO 解析器下，始终传递一致的结构意图。标签选错，后面补 ARIA、调样式、修 SEO，全是重复劳动。

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