导航栏子项不均分宽度的根本原因是未控制伸缩行为；应给每个导航项设flex: 1（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），强制从零宽度均分剩余空间，并清除width、min-width、white-space: normal等干扰样式。
导航栏用 display: flex 后子项不均分宽度？
直接给父容器（比如 <nav></nav> 或 <ul></ul>）加 display: flex，但菜单项（<a></a> 或 <li>）宽度参差不齐，不是你想要的“平分”效果——问题不在没加 flex，而在没控制子项的伸缩行为。
-
flex: 1是关键：给每个导航项（如<li>或<a></a>）加flex: 1，它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，强制所有项从零宽度开始均分剩余空间 - 别只依赖
justify-content: space-between：它只在项之间塞间隙，项本身宽度由内容决定，无法真正“平分” - 如果项里有文字或图标，确保没设固定
width或min-width，否则会卡住伸缩 - 避免
white-space: nowrap撑破宽度，必要时用overflow: hidden; text-overflow: ellipsis控制溢出
<a></a> 标签在 flex 导航里垂直居中偏上？
看着“没对齐”，其实是 <a></a> 默认是内联元素，基线对齐 + line-height + align-items: center 三者打架。Flex 的 align-items: center 有参照，但它对内联元素的对齐逻辑不直观。
- 给
<a></a>加display: block或display: inline-block，切断默认基线对齐 - 删掉或重置
line-height（比如设为line-height: 1），改用padding-top和padding-bottom控制上下留白 - 确保父容器（如
<nav></nav>）有明确高度（比如height: 60px或min-height: 60px），否则align-items: center缺少垂直基准
响应式下均分导航项宽度塌缩或换行？
小屏时菜单项挤成一团、文字折行、甚至整行错位，不是 flex 失效，而是默认 flex-wrap: nowrap 遇到空间不足时强行压缩，或者子项最小宽度撑爆容器。
- 加
flex-wrap: wrap允许换行，但通常导航不需要——更推荐用flex-shrink: 0防压缩 + 媒体查询降级 - 在小屏断点里，把
flex: 1改成flex: none，再配合width: auto恢复内容自适应宽度 - 给
<nav></nav>设overflow-x: auto和white-space: nowrap，让超宽导航可横向滚动（适合移动端底部导航） - 避免在
<li>上设min-width，它会和flex: 1冲突，导致均分失败
为什么加了 flex: 1 还是不均分？
常见原因是父容器或子项被其他 CSS 干扰，比如浮动、绝对定位、或 display 被覆盖。Flex 的伸缩规则只对直系 flex item 生效，中间插一层非 flex 容器就断链。
- 检查是否误给
<li>包了额外<div> 或 <code><span></span>，它们没设flex: 1，反而成了“占位黑洞” - 确认没写
float: left—— Flex 容器里 float 会被忽略，但残留样式可能影响渲染顺序 - 浏览器 DevTools 里看 computed style，重点查
flex-basis是否真为0%，如果不是，说明某个地方覆盖了flex: 1 - IE11 对
flex: 1解析不稳定，需补-ms-flex: 1，但更建议用flex: 1 1 0%显式声明
实际最稳的导航均分写法就是：
nav {
display: flex;
}
nav a {
flex: 1;
display: block;
padding: 1rem 0;
text-align: center;
}
复杂点在于你得盯住每一层 display 和 flex 层级关系，而不是只抄一行 flex: 1。
