Flexbox导航栏需设display: flex和flex-wrap: nowrap；子项用flex: 1均分，或flex: 0 1 auto保自然宽；注意box-sizing、hover预占位、伪元素滑入、可访问性及IE11兼容写法。
Flexbox布局让导航栏自动均分宽度
用 display: flex 是最直接的解法，但很多人卡在子项不等宽或换行错乱上。关键不是加了 flex 就完事，得控制主轴分配和收缩行为。
- 父容器必须设
display: flex，且推荐加flex-wrap: nowrap防意外折行 - 导航项（
a或li）要加flex: 1实现均分；如果想保留文字自然宽度，改用flex: 0 1 auto - 别漏掉
box-sizing: border-box，否则 padding 会撑出滚动条或溢出 - 移动端要注意：均分在小屏下可能文字挤成一团，建议配合
min-width: 0+overflow: hidden+text-overflow: ellipsis
:hover伪类触发下划线动画但不跳动
常见错误是直接给 a:hover 加 border-bottom，结果文字突然上移——因为边框占用了新空间。真正稳的方案是预占位+过渡。
- 基础项统一设
border-bottom: 2px solid transparent，hover 时只改颜色，不改变尺寸 - 动画用
transition: border-color 0.3s ease，别写成all，否则字体粗细变化也会被过渡，显得拖沓 - 若需“从左到右”滑入效果，得用
::after伪元素 +transform: scaleX(0)→scaleX(1)，且必须设transform-origin: left - 注意 Safari 对
transform在 inline 元素上的兼容性，a标签建议加display: inline-block
响应式断点下菜单收为汉堡按钮但保持语义结构
纯 CSS 实现折叠菜单时，最常踩的坑是用 display: none 直接隐藏导航项——这会让屏幕阅读器也跳过，还破坏键盘 Tab 顺序。
- 用
max-width媒体查询切换布局，小屏下把nav设为position: relative，菜单项用position: absolute+top: 100%下拉，而非display: none - 汉堡图标用
input[type="checkbox"] + label控制显隐，比 JS 更轻量、可访问性更好 - 绝对定位的菜单内容必须加
inset: 0 auto auto 0（或top/right）并设width: max-content，避免撑满全屏 - 记得给焦点状态加
outline，否则键盘用户无法感知当前聚焦在哪一项
Flex导航栏在IE11里错位或不换行
IE11 的 Flex 实现有名的坑多，尤其遇到 flex: 1 和 min-width 组合时，大概率子项宽度归零或溢出容器。
- 必须加厂商前缀：
display: -ms-flexbox，且所有 flex 相关属性都要补-ms-版本（如-ms-flex: 1） - 避免在 IE11 中使用
flex: 0 1 auto，换成-ms-flex: 0 1 150px这种带具体基准值的写法 - 如果导航项含图片或图标，IE11 会对
img默认设flex-shrink: 0，导致其他项被压缩过度，需手动加-ms-flex-negative: 1 - 测试时打开 F12 开发者工具，切到 IE11 文档模式，看“计算样式”里
flex-basis是否被识别为auto而非0px
Flexbox 导航栏看着简单，但 hover 动画的渲染层、响应式下的可访问性、IE11 的 flex 计算逻辑，这三块最容易在上线后才暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
