要使nav子项平均分配，需为每个子项设置flex: 1并配合box-sizing: border-box；防折行加white-space: nowrap；触控优化用padding和touch-action；IE11兼容需用flex: 1 1 0。
flex布局下nav元素子项不平均分配？检查justify-content和flex属性
默认情况下，display: flex 的 nav 容器不会自动让子项等宽——它只按内容宽度排列。要平均分布，必须显式设置对齐方式和伸缩行为。
-
justify-content: space-between是常见误选：它只在首尾留空，中间无间距，且不处理宽度；真正需要的是justify-content: space-around或更稳妥的flex: 1方案 - 每个导航项（如
a或li）需设flex: 1，否则它们保持固有宽度，flex容器只负责排列，不强制拉伸 - 若子项含内边距或边框，需加
box-sizing: border-box，否则flex: 1计算宽度时会溢出
用flex实现响应式导航栏时，a标签换行或错位？注意white-space和min-width
小屏幕下文字多的 a 标签容易折行，破坏横向布局；或者因内容过短被压缩到看不见。
- 给导航项加
white-space: nowrap防止文字折行，这是最常漏掉的一行样式 - 设
min-width: 0在某些浏览器（如旧版Safari）中能防止flex: 1下文本撑开导致的溢出 - 避免对
a直接设固定width，这会和flex: 1冲突；宽度应由 flex 系统统一控制
导航栏在移动端点击区域太小？别只改font-size，要调padding和touch-action
触屏设备上，a 标签默认点击热区仅覆盖文字，用户容易点不中。
- 给导航项加
padding: 0.75rem 1rem（至少 44px × 44px），这是 iOS/Android 推荐最小触控尺寸 - 加
touch-action: manipulation可减少移动端 300ms 点击延迟，提升响应感 - 如果用了
display: flex+flex: 1，确保父容器没设overflow: hidden，否则 padding 可能被裁剪
IE11兼容flex导航栏？避开flex-basis百分比和flex-grow混合写法
IE11 对 flex 的解析很脆弱，尤其在 flex: 1 1 20% 这类写法下容易崩溃或不均分。
- 用完整三值写法
flex: 1 1 0替代flex: 1，明确flex-basis为0，IE11 才能正确按比例分配剩余空间 - 避免
flex: 1 1 auto，IE11 会把auto当成内容宽度，导致不等宽 - 必要时加
*display: inline-block和*zoom: 1触发 IE7–8 的 hasLayout（虽已淘汰，但部分内网系统仍需兜底）
flex 平均分布看着简单，实际卡点全在细节：子项是否设了 flex、是否处理了盒模型、是否考虑了触控与兼容性边界。漏掉任意一个，就可能在某个设备或浏览器里突然“不平均”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
