移动端导航栏应使用flex-direction切换实现响应式适配：桌面端row横向，移动端column竖排；配合宽度约束、合理padding与gap、语义化标签及可访问性属性，轻量且无需JS。
移动端导航栏不好用，通常是因为直接把桌面端的横向布局生搬硬套到小屏幕上，导致菜单拥挤、点击区域小、折叠逻辑混乱。用 flex-direction 切换 是一种轻量、语义清晰且无需 JS 就能响应式适配的方式。
让导航在移动端竖排堆叠
桌面端常用 flex-direction: row 横向排列菜单项，但手机屏宽有限，横向会溢出或缩小文字。在媒体查询中改为竖排，能自然撑开点击热区，也更符合手指滑动习惯。
- 给导航容器（如
.nav）默认设display: flex和flex-direction: row - 加媒体查询：
@media (max-width: 768px) { .nav { flex-direction: column; } } - 顺带把
justify-content改为flex-start或center，避免竖排后左右留白过大
控制子项宽度与间距更合理
竖排后，每个菜单项默认占满容器宽度，但可能太“胖”或太“瘦”。需主动约束宽度和内边距，提升可点性。
- 对
.nav a或.nav li设置width: 100%（确保点击区域完整） - 添加
padding: 16px 20px（上下留足手指空间，左右不顶边） - 用
gap: 4px替代传统margin-bottom控制项间距离，更干净可控
配合汉堡菜单时注意结构一致性
如果用了点击展开的汉堡菜单，内部列表仍建议用 flex 竖排，否则动画展开后仍是挤在一起的横条。
立即学习“前端免费学习笔记（深入）”；
- 隐藏状态下的
.nav-menu可设flex-direction: column并display: none - 激活时只改
display: flex，不用重复写方向 —— 方向已继承 - 避免给子项设
float或inline-block，会破坏 flex 流式行为
别忽略可访问性细节
竖排只是第一步，用户还得知道这是导航、能键盘操作、屏幕朗读器能识别。
- 用
包裹整个导航区域，并加aria-label="主菜单" - 汉堡按钮要有
aria-expanded和aria-controls属性，随展开/收起动态更新 - 确保焦点顺序自然（Tab 键从 logo → 导航项 → 搜索框），可通过
tabindex微调
不复杂但容易忽略：flex-direction 切换本身很轻，真正影响体验的是配套的间距、尺寸、语义和交互反馈。做一次就管用，也不用额外引入框架。
