:active仅在按下瞬间生效，不能标记选中态；需用current等class配合JS/路由逻辑控制，并注意padding对齐、伪元素高亮及多端兼容性。
flex导航菜单里:active为什么点一下就没了
因为:active只在鼠标按下/手指按下的瞬间生效，松开就立刻失效——它不是“当前选中”，而是“正在被按”。真要标记选中态，得靠class手动控制，比如is-active或current。
- 浏览器不会自动给导航项加
active类，JS或服务端得显式设置 -
:active适合做按压反馈（比如背景变深），但不能替代选中高亮 - 如果用
a标签跳转，刷新后需后端或路由逻辑重新设current类
用display: flex排导航时，选中项怎么对齐又不撑开
Flex容器默认align-items: stretch，一旦给选中项加边框、背景或内边距，容易导致高度不一致。关键不是“加样式”，而是“加样式时不破坏基线对齐”。
- 统一用
padding而非border做高亮区，避免盒模型变化 - 若必须用
border-bottom，记得给所有项都设border-bottom: 2px solid transparent，再单独改current项的颜色 - 慎用
height固定导航项高度——字体渲染差异可能导致文字上下偏移 - 推荐用
line-height配合padding垂直居中，比flex-align更稳定
React/Vue里动态切换current类容易漏掉什么
组件化环境下，状态更新和DOM同步有延迟，直接操作className容易不同步；更麻烦的是路由变化时，旧的current没清掉，新的没加上。
- Vue用
:class="{ 'current': item.path === $route.path }"，别漏掉exact匹配逻辑（比如/user不该匹配/user/profile） - React用
useLocation()监听路径，但要注意useEffect依赖数组里必须包含location.pathname，否则不重算 - 如果导航是异步加载的（比如权限过滤后渲染），
current判断逻辑得等数据就绪后再执行，否则初始为空
移动端点击区域小、误触多，flex导航怎么防手滑
Flex本身不解决点击精度问题，但能配合CSS快速扩大有效热区而不影响视觉布局。
立即学习“前端免费学习笔记（深入）”；
- 给
a或button设padding: 12px 20px，再用touch-action: manipulation减少300ms延迟 - 别只靠
font-size撑开点击区——小屏下文字缩放会破坏间距，padding才是可靠手段 - 如果用伪元素做下划线高亮（如
::after），确保content: ""且position: absolute，否则可能干扰flex流 - 测试时真机连点两次，看是否触发双击缩放——没关
viewport的user-scalable=no的话，整个导航会突然变小
current类在路由跳转、权限变更、服务端渲染、客户端水合这几种场景下始终准确——漏一种，导航就“看起来选中了，其实没反应”。 
