最稳妥方式是左侧设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强制归零，引发高度塌陷或文字挤叠
<main></main> 和 <aside></aside> 的语义边界在哪
很多人把侧边栏硬塞进 <main></main> 里，或者反过来用 <aside></aside> 包主内容，结果 SEO 权重错配、屏幕阅读器跳过关键区块。
使用场景很明确：<main></main> 必须唯一，且只包裹当前页面“不可替代”的核心内容（如表单操作区、数据看板、编辑器）；<aside></aside> 是可移除的辅助信息（如筛选条件面板、操作快捷入口、实时通知栏）。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
<aside></aside>可以出现在<main></main>内部（如文章页右侧的“目录导航”），也可以在<main></main>外部（如全局左侧菜单） - 如果侧边栏承载的是系统级功能（如权限控制、用户切换），建议放在
直接子级，与<main></main>并列，而非嵌套 - 不要用
<section></section>替代<aside></aside>——前者强调主题独立性（如“销售报表”区块），后者强调内容从属性
响应式断点下，主次区域怎么切换布局模式
纯 Flex 横向布局在移动端撑不开，强行堆叠又丢失导航上下文。这时候不能只靠 @media 改 flex-direction，得配合 DOM 结构微调。
性能影响明显：在小屏上保留左侧 <aside></aside> 但设为 display: none，会导致 JS 仍要解析、渲染引擎仍分配布局空间。
- 推荐方案：用
display: contents（支持度 ≥ Chrome 65 / Safari 15.4）让<aside></aside>在小屏下“消失”但不破坏语义流 - 更兼容的做法：用
position: fixed+transform: translateX(-100%)隐藏侧边栏，再用 JS 控制类名切换，避免重排 - 别在
@media里反复改flex的三个参数——先定好基础值（如flex: 0 0 240px），断点内只改flex-basis或切为flex-direction: column
为什么不用 <div class="sidebar"> 而坚持用语义标签
<p>表面看只是换了个标签名，实际影响 CSS 维护成本、无障碍识别率和 SSR 渲染逻辑。</p>
<p>容易踩的坑：某天想给所有主内容区加统一 max-width，结果发现有的叫 <code>.content、有的叫 .main-area、还有的是 #primary，最后写了七八条选择器，且无法用 main 伪类做全局样式复位。
-
<main></main> 浏览器默认有 role="main"，<aside></aside> 对应 role="complementary"，屏幕阅读器能直接跳转，而 div 需手动补 ARIA 属性
- SEO 工具（如 Lighthouse）会将无语义
div 视为“结构模糊”，降低内容可信度评分
- 后续接入 Web Components 或微前端时，语义标签更容易被框架识别为 slot 插槽锚点
<main></main> 浏览器默认有 role="main"，<aside></aside> 对应 role="complementary"，屏幕阅读器能直接跳转，而 div 需手动补 ARIA 属性div 视为“结构模糊”，降低内容可信度评分真正难的不是写出能跑的布局，而是让主次区域在不同设备、不同读屏模式、不同 SEO 解析器下，始终传递一致的结构意图。标签选错，后面补 ARIA、调样式、修 SEO，全是重复劳动。
