垂直导航栏必须用flex-direction: column，不能只靠float或display:block；需将nav放入display:flex容器，ul设flex-direction:column，nav设width和flex-shrink:0，用gap替代margin控制间距，并通过外层flex协调nav与main布局。
垂直导航栏必须用 flex-direction: column，不能只靠 float 或 display: block
垂直导航不是“把 li 往下堆”就完事。很多初学者用 float: left 或纯 display: block，结果在响应式场景下错位、高度塌陷、子项无法对齐，甚至和主内容重叠。
真正可控的做法是：把 nav 放进一个页面级 display: flex 容器，再让其内部 ul 明确设为 flex-direction: column。
-
nav自身要设固定宽度（如width: 200px）并加flex-shrink: 0，否则在弹性容器中会被压缩变形 -
ul移除默认padding-left和list-style，否则左侧多出空白或圆点 - 别给
li设margin-bottom来控制间距——改用gap: 8px更干净，且不会影响首尾项
主内容区域怎么避免被垂直导航遮挡
常见错误是只给 nav 加 position: fixed，却不约束主内容的起始位置，导致文字从导航底下穿出来。
正确做法是用外层 flex 容器统一协调两块区域：
- 父容器设
display: flex; min-height: 100vh，保证撑满视口 -
nav和主内容区（比如main）作为直接子元素，并列放置 - 主内容区加
flex: 1，自动填满剩余宽度；如果需要滚动，再额外加overflow-y: auto - 千万别对
main单独设margin-left去“躲开”导航——这在缩放或不同屏幕下极易失效
移动端要不要保留垂直导航？怎么折行或隐藏
垂直导航在小屏上天然占高不占宽，但若菜单项太多（比如 15 个），用户得疯狂滑动，体验反而比水平汉堡菜单差。
判断逻辑应基于设备能力而非单纯宽度：
- 用媒体查询检测
max-width: 768px时，把整个nav设为display: none - 同时显示一个
button触发器，点击后通过 JS 切换nav的display: block或加类名控制显隐 - 不建议在小屏强行保持垂直布局并设
overflow-y: auto——手指滚动精度低，容易误触 - 如果业务强依赖侧边导航（如后台系统），至少加
touch-action: pan-y防止横向拖拽冲突
当前页高亮（active）为什么总失效
class="active" 硬编码到每个 HTML 文件里，是最容易崩的方案。路径稍有差异（/about vs /about/）、哈希路由（#!/dashboard）、服务端渲染路径前缀（/zh-CN/products）都会让匹配失败。
真正靠谱的方式只有两种：
- 服务端动态注入：模板引擎（如 EJS、Nunjucks）根据当前请求 URL 渲染对应
active类 - 前端 JS 匹配：监听
location.pathname或location.hash，用startsWith()或正则做前缀匹配（比如/products应匹配/products/list和/products/detail/123） - 绝对不要用
==或===全等判断，因为 URL 可能带查询参数或 trailing slash
垂直导航看着简单，但宽度控制、内容避让、高亮逻辑、移动端适配这四点，任何一个没对齐，就会在真实项目里反复返工。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
