最稳做法是父容器设 display: flex，子项设 flex: 1；需确保父容器有明确宽度，子项不设 width/min-width，图标用 flex-shrink: 0，文字截断用 overflow:hidden+text-overflow:ellipsis+white-space:nowrap 控制在内容层。
用 display: flex 让导航项等宽平分容器
直接给父容器加 display: flex，再配 flex: 1 给每个子项，是最稳、最通用的做法。它不依赖项数，也不怕文字长短差异，浏览器兼容性从 Chrome 29 / Firefox 20 / Safari 6.1 起就完全 OK。
常见错误是只加 display: flex 却忘了设子项的伸缩行为——结果所有项按内容宽度挤在一起，根本没“平分”。
- 父元素必须有明确宽度（比如
width: 100%或固定值），否则 flex 容器可能收缩得比内容还小 - 子项别设
width或min-width，否则会干扰flex: 1的均分逻辑 - 如果导航项里有图标或 badge，用
flex-shrink: 0保它们不被压缩，但主体文字部分仍要留出弹性空间
遇到 white-space: nowrap 导致换行失效？先检查这个
很多导航条默认加了 white-space: nowrap 防止文字折行，但这会让长文本撑开整个 flex 项，破坏等宽效果。不是 bug，是 CSS 层叠的正常表现。
解决方法很简单：在子项内部的文字容器（比如 <span> 或链接内文字）上加 overflow: hidden + text-overflow: ellipsis + white-space: nowrap，把截断控制在内容层，而不是让整块 flex 项扛住宽度。
立即学习“前端免费学习笔记（深入）”；
- 别在 flex 子项上直接写
overflow: hidden，会切掉图标或下拉箭头 - 如果要用省略号，必须同时设
width或max-width，否则text-overflow不生效 - 移动端小屏下建议配合
font-size: clamp(0.875rem, 4vw, 1rem)动态缩放文字，避免溢出
grid-template-columns: repeat(auto-fit, minmax(...))) 能不能替代 flex？
能，但没必要。CSS Grid 的 repeat(auto-fit, minmax(120px, 1fr))) 确实可以实现响应式等分，但它本质是“尽可能多列”，而导航条通常是固定项数（比如 4 个菜单）、要求严格等宽。
用 Grid 容易踩的坑：当容器宽度不足以放下最小列宽时，列数会减少，导致最后一项突然变宽；而 flex 下所有项始终共担剩余空间，视觉更稳定。
- Grid 更适合卡片列表、工具栏这类“数量不固定”的场景
- 如果硬要用 Grid 做导航，得配合
grid-auto-flow: column和显式列数（如repeat(4, 1fr)），反而失去响应优势 - IE11 对
auto-fit支持极差，flex 则无此问题
JavaScript 动态计算宽度？多数时候是画蛇添足
有人用 JS 获取容器宽度、除以项数、再赋值给每个 style.width，这在 window resize 时极易出错：重排触发频繁、无法响应字体加载、SSR 下取不到真实 DOM 尺寸。
现代 CSS 已经足够可靠。只有两个真实需要 JS 的例外：需要兼容 IE9 及更老版本；或者导航项高度必须严格对齐（比如带底边框的激活态），而 flex 的基线对齐有细微偏差。
- 若真要用 JS，优先监听
resize+debounce，别每次触发都重算 - 避免用
getBoundingClientRect()在循环里反复调用，改用ResizeObserver（Chrome 64+） - 绝大多数项目，删掉那几十行 JS，换成三行 CSS，反而更健壮
真正难的不是怎么分，而是分完之后 hover 状态、焦点管理、键盘导航、屏幕阅读器语义这些地方容易被忽略——尤其是用 flex: 1 后，有些旧版辅助技术会把整条导航读成一个大按钮。
