flex: 1 未等宽是因 flex-basis: auto 优先按内容宽度占位，需设 flex-basis: 0（即 flex: 1 1 0）并配合 min-width: 0 和清除标题默认 margin 才能实现真正等宽。
flex: 1 为什么没让导航项等宽？
直接写 flex: 1 却发现文字长的项更宽、短的项被压缩——这不是 flex 失效，而是你没切断内容对 flex 基准的影响。默认情况下，flex-basis: auto 会让每个项先按自身内容宽度占位，再分配剩余空间，结果就是“内容越长，越吃空间”。
- 要真等宽，必须显式设
flex-basis: 0，即flex: 1 1 0（或简写为flex: 1，但前提是父容器已设display: flex） - 子项若有
width、min-width或内联样式干扰，会覆盖 flex 行为；尤其注意图片、图标或长 URL 会触发浏览器默认最小宽度保护 - 务必给所有导航项加
min-width: 0，否则含长英文/URL 的项拒绝收缩，flex: 1形同虚设
导航里混着 <a></a> 和 <button></button> 怎么统一宽度？
混合标签类型本身不破坏 flex 布局，但它们的默认样式差异会干扰对齐和尺寸表现：比如 <button></button> 默认有上下 padding 和 border，<a></a> 是纯 inline 元素，line-height 和 vertical-align 不一致会导致视觉错位。
- 统一重置：给所有导航项（
.nav-item或直接选a, button）设display: block或display: flex，并明确height、line-height、padding - 避免依赖
text-align: center居中文字——它对 inline 元素有效，但对 flex 子项优先用justify-content: center+align-items: center - 若用
<button></button>做下拉触发器，别忘了移除其默认 outline 和 focus 样式，否则悬停时边框跳变
gap 比 margin 更稳，但 IE 不支持怎么办？
gap 是 flex 容器内最干净的间距控制方式，它只作用于相邻子项之间，不塌陷、不溢出、不干扰首尾外边距。但 IE 11 及更早版本完全不识别 gap，强行使用会导致子项紧贴排列。
- 降级方案不是“全删 gap”，而是双写：
gap: 12px后紧跟margin-right: 12px，再用:last-child { margin-right: 0 }清掉末项多余边距 - 别在 flex 容器上同时设
justify-content: space-between和gap——两者逻辑冲突，space-between会把间隙算进总分配空间，导致实际间距翻倍 - 如果项目数不固定（比如后台动态生成菜单），
gap比margin更可靠；而space-between只适合固定数量项，否则两端留白暴露空隙
标题标签（<h3></h3>）偷偷撑开导航高度
设置 padding: 8px 16px 却发现顶部空白远超预期？大概率是导航项里嵌了 <h3></h3>——它的默认 margin-block-start 和 margin-block-end（通常为 1em）会撑开父容器，让 padding “看起来没生效”。
- 精准修复：只针对导航上下文写
.nav h3 { margin: 0; }，绝不要全局写h3 { margin: 0 } - 移除 margin 后文字可能贴顶，此时用
line-height或padding-top/padding-bottom微调，比靠 height 硬控更安全 - 如果用了
display: flex+align-items: center，line-height就不是必需项，但需确保子元素没有意外的margin或vertical-align
min-width: 0 和没处理标题默认 margin——这两个点一漏，等宽就永远差那么一点。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
