导航菜单flex间距不均主因是容器未设明确宽度，导致justify-content无效；需设width:100%或max-width，并避免子项脱离文档流、文字换行及宽度假设。
导航菜单用 flex 布局但 item 间距不均匀？先看容器有没有设宽度
很多情况下 justify-content: space-around 看起来没效果，不是写错了，而是父容器（比如 或 width: auto，实际只包裹内容，flex 无“剩余空间”可分。必须让容器占满可用宽度，space-around 才有作用。
- 给导航容器加
width: 100%或max-width: 1200px等明确宽度 - 如果容器是
inline元素（如未设display: block的display: flex和width: 100% - 避免子项（
）设了float或position: absolute，会脱离 flex 流
space-around 和 space-between 效果差异明显，别混用
space-around 会让首尾项到容器边缘的距离 ≈ 中间项间距的一半；而 space-between 把首尾项“贴边”，中间均分剩余空间。视觉上 space-around 更宽松，但容易被误认为“左边空太多”。
- 如果导航靠左对齐但又想均匀分布，优先用
space-between+ 首尾加伪元素占位 - 若必须用
space-around且想减小首尾留白，可给容器加padding-inline: 1rem手动补偿 - 注意：
space-around对单个子项无效（无“周围”可分），至少需要 2 个可见子项
flex 子项宽度不一致导致视觉不均？检查 min-width 和 white-space
即使用了 justify-content: space-around，如果某些菜单文字过长换行、或子项设置了 min-width / flex-shrink: 0，会导致 flex 基线错乱，间距看起来不匀。
- 给菜单项加
white-space: nowrap防止意外折行 - 避免对
或设固定width，改用flex: 0 1 auto让其自然伸缩 - 如有图标+文字组合，用
display: flex; align-items: center统一基线，否则高度不一会拉歪间距
nav {
display: flex;
justify-content: space-around;
width: 100%;
padding-inline: 1.5rem;
}
nav a {
white-space: nowrap;
text-decoration: none;
padding: 0.75rem 1rem;
}
移动端适配时 space-around 容易挤出横向滚动条
在小屏幕下，space-around 分配的间隙可能让总宽度超过 100%，尤其当菜单项多、字体大或有内边距时，触发 overflow-x: auto，出现意外滚动条。
立即学习“前端免费学习笔记（深入）”；
- 加
overflow-x: hidden治标，但更推荐用媒体查询降级为justify-content: center或垂直堆叠 - 用
gap替代justify-content（现代方案）：设display: flex; gap: 1.5rem，再配合flex-wrap: wrap更可控 - 测试真机或 Chrome DevTools 的 device toolbar，不要只信桌面模拟
space-around，最后发现只是忘了给 width: 100%。 
