侧边栏导航本质是语义结构（nav/aside）与CSS布局（如Flex）的组合，nav适用于纯导航链接，aside适用于非导航补充内容；Flex布局中main设flex:1自适应，nav设固定宽；移动端应依优先级选择垂直堆叠或动画隐藏。
侧边栏导航不是靠某个“模板标签”自动出来的，它本质是语义结构 + 布局控制的组合结果；用 aside 标签只是表明“这是附属内容”，但不会让它自动贴边、固定或响应式——这些全靠 CSS 决定。
用 aside 还是 nav？先看内容角色
如果侧边栏里全是跳转链接（如「相关文章」「分类目录」「快速锚点」），它实际承担的是导航功能，nav 比 aside 更准确。搜索引擎和屏幕阅读器会据此识别其用途。
-
nav：适合主导航、子导航、文档内锚点列表等明确用于跳转的区域 -
aside：适合广告、作者简介、引用说明、推荐卡片等“补充但非导航”的内容 - 混用也常见：比如
nav里嵌一个aside放当前作者信息，语义更细
Flex 布局下 main 和 nav 的宽度怎么配？
现代页面基本不用 float 或 position: fixed 硬控侧边栏了，Flex 是最稳的起点。关键不是“谁在左谁在右”，而是主内容能否自适应剩余空间。
- 把
main和nav包进同一个父容器（比如article或带 class 的div） - 给父容器设
display: flex; gap: 1.5rem; -
main加flex: 1;—— 它会撑满所有剩余宽度，不写死像素值 -
nav设width: 260px;（或min-width: 260px;）—— 固定宽比flex: 0 0 260px更易调试，也避免小屏下被压扁
移动端要不要隐藏侧边栏？得看内容优先级
不是所有侧边栏都该在手机上折叠。如果里面是核心导航（比如文档大纲、章节跳转），隐藏它等于砍掉关键路径。这时候更适合垂直堆叠 + 滚动，而不是直接 display: none。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询判断宽度：
@media (max-width: 768px) { .container { flex-direction: column; } } - 别只改布局，顺手加
overflow-y: auto;到nav上，防止长菜单撑爆视口 - 如果真要收起，用
visibility: hidden; height: 0;配合过渡动画，比display: none更利于 JS 控制显隐逻辑
为什么用 nav 包 ul 而不是直接写一堆 a？
可访问性和语义完整性在这里不是加分项，是底线。屏幕阅读器遇到孤立的 a 标签，只会读“链接”，不知道它们是一组导航；而 nav + ul 组合能触发“导航区域，共 5 个链接”这样的上下文播报。
-
ul不只是为了样式方便，它天然表达“同级、并列、无序”的关系 - 每个
li里放a，不要把a直接塞进nav—— 这会破坏列表语义，部分辅助技术可能跳过 - 当前页链接加
aria-current="page"，比如<a href="/guide" aria-current="page">指南</a>，能让读屏软件提示“这是当前页”
最容易被忽略的一点：侧边栏高度没内容撑开时，flex: 1 的 main 会把它“吸上去”，导致视觉悬浮。解决方法不是给 nav 加 min-height，而是确保父容器有明确高度来源（比如 viewport 单位、或至少一个 height: 100vh 的祖先）。否则再精细的布局也会在空数据时露馅。
