直接给两个独立元素设display: flex无效，因Flexbox只作用于直接子元素；需用共同父容器启用flex布局，并确保DOM顺序、高度链和滚动上下文正确对齐。
为什么直接给两个
因为 Flexbox 只控制**直接子元素**的排列，不是“让所有带 flex 的元素自动对齐”。你写两个独立的 <nav></nav> 和 <aside></aside>，它们默认是块级元素，彼此堆叠；各自内部设 display: flex，只影响里面的 <ul></ul> 或 <li>，和对方完全无关。
真正要实现“左栏导航 + 右栏内容”垂直分栏，必须有一个共同父容器，并在它上面启用布局模型。
- 错误写法：
<nav></nav><main></main>两个并列标签，没包裹、没布局上下文 - 正确起点：用
<div class="layout"> 或语义化 <code><main></main>包住二者，再加display: flex - 若右栏需滚动而左栏固定，父容器必须有明确高度（比如
min-height: 100dvh），否则overflow-y: auto无效 - HTML 结构必须是：父容器 >
<nav class="sidebar"></nav>+<main class="content"></main>（不能把<nav></nav>塞进<main></main>里） - CSS 关键三行：
.layout { display: flex; min-height: 100dvh; }、.sidebar { width: 240px; flex-shrink: 0; overflow-y: auto; }、.content { flex: 1; } - 不要给
.sidebar设height: 100%—— 它依赖父容器高度撑开，而100%在 flex 容器里行为不可靠 - 如果顶部有
<header></header>，把<header></header>放在.layout外层，再用flex-direction: column套一层，避免高度计算错乱 - 必须保持
<nav></nav>在前、<main></main>在后 —— 这样小屏下@media (max-width: 600px)改成flex-direction: column时，主内容仍优先加载 - 不要用
order属性强行调换阅读顺序，会破坏语义和 SEO -
<nav></nav>必须有aria-label="侧边导航"，尤其当页面含多个<nav></nav>时（比如还有顶部导航） - 若左栏含折叠菜单，用
details/summary比纯 JS 切换更轻量、原生支持键盘操作 - 必须重置
.sidebar { width: auto; max-width: none; }，否则它还占着 240px，小屏下会横向溢出 - 加上
.sidebar { align-self: stretch; }，让它在 column 下填满父容器宽度 - 如果右栏有固定高度需求（比如图表容器），记得在断点里删掉
min-height: 100dvh，否则小屏会强制拉高页面 - 测试时打开浏览器 DevTools 的「Rendering」面板，勾选 “Emulate vision deficiencies”，确认色差和焦点顺序没崩
用 flex 实现双栏垂直导航的标准结构
适用于后台系统、文档站、CMS 管理页等需要左侧菜单长期可见、右侧随动的场景。核心是左栏固定宽度、右栏自适应、两者同高、左栏可独立滚动。
左右联动时的 DOM 顺序与可访问性陷阱
视觉上左栏在左、右栏在右，但 DOM 顺序决定屏幕阅读器读取顺序和小屏堆叠逻辑。别为了“看起来顺”把右栏 HTML 写在前面。
响应式断点里最常漏掉的一句 CSS
很多人写了 @media (max-width: 600px) { .layout { flex-direction: column; } } 就以为完了，结果右栏内容被左栏撑开、出现意外滚动条或空白间隙。
双栏垂直导航真正的复杂点不在怎么排版，而在高度链传递、滚动上下文隔离、以及 DOM 顺序和视觉顺序的持续对齐——这三者只要一个断开，小屏体验或辅助技术支持就会立刻出问题。
