justify-content: space-between在菜单项数量变化或存在隐藏项时会导致间距不均；推荐space-around或space-evenly（注意IE不支持space-evenly）；等宽填满用flex: 1配合min-width: 0、text-overflow: ellipsis等控制文本；激活态避免偏移需统一align-items: center、box-sizing: border-box，慎用height/line-height；响应式折叠宜切换display或flex-direction: column，禁用flex-wrap: wrap控制换行。
flex布局中justify-content: space-between为什么菜单项间距不均？
因为space-between只在首尾项贴边时才均匀分配中间间隙，一旦菜单项数量变化或存在隐藏/禁用项，视觉上就容易显得松散或挤压。更可靠的做法是用space-around或space-evenly，但要注意浏览器兼容性——space-evenly在IE中完全不支持，Safari 12之前也需谨慎。
如何让每个菜单项宽度一致且填满容器？
直接设flex: 1最简单，但要注意：如果菜单项里有文字长度差异大，又没限制white-space和overflow，可能撑开容器或换行。推荐组合使用：
-
flex: 1让所有项等分主轴空间 -
min-width: 0防止内容（如长链接）强制撑宽 -
text-overflow: ellipsis+white-space: nowrap+overflow: hidden控制文本溢出
下划线激活态、hover高亮怎么和flex配合不偏移？
Flex容器默认align-items: stretch，如果给菜单项加border-bottom或box-shadow，可能因基线对齐或盒模型导致高度微变。稳妥做法是：
- 统一设
align-items: center，避免垂直方向浮动 - 激活态改用
padding-bottom+border-bottom，并确保所有项box-sizing: border-box - 避免在
:hover里改height或line-height，优先用color、background-color或transform: scale(1.05)
响应式折叠菜单时flex还适用吗？
适用，但别硬扛小屏。建议在移动端断点内把display: flex切为display: none，改用position: absolute或flex-direction: column配合汉堡菜单。关键点：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (max-width: 768px)包裹移动端样式 - 折叠后保持
flex-direction: column，再用max-height+overflow: hidden做展开动画 - 不要依赖
flex-wrap: wrap来“自动换行”导航项——它无法控制换行位置，易导致单个项被截断
真正难的不是写出来，而是当菜单加了图标、徽标、下拉箭头之后，flex-align和gap的微调会反复影响视觉节奏。多试两遍align-items和justify-content的组合，比查文档更快定位问题。
