flex布局实现导航栏需将display: flex设在父容器（如nav或ul）上，而非单个菜单项；通过flex属性控制等宽、自适应或固定宽度；配合flex-wrap、justify-content和align-items实现换行、对齐与垂直居中；注意IE兼容性及常见失效原因。
flex布局实现导航栏的基本结构
用 display: flex 让导航容器成为弹性盒子，是让菜单项自动水平排列最直接的方式。关键不是“怎么写”，而是“谁该设flex”——必须作用在包裹所有 <li> 或 <a></a> 的父容器上（通常是 <nav></nav> 或 <ul></ul>），而不是单个菜单项。
常见错误是给 <li> 加 display: flex，结果每个菜单项自己变成一个独立的弹性容器，完全达不到横向排列效果。
基础写法示例：
nav {
display: flex;
}
nav a {
padding: 12px 20px;
text-decoration: none;
}
让菜单项等宽或按内容自适应
默认情况下，flex 项目不会等宽，它们只按自身内容宽度排列。要控制宽度分配，得靠 flex 的三个子属性：flex-grow、flex-shrink、flex-basis。
立即学习“前端免费学习笔记（深入）”；
- 让所有菜单项等宽：给每个
a或li设置flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 让菜单项按文字长度自然伸缩、但不换行：保持默认，或显式设
flex: 0 0 auto - 某些项固定宽度（如logo）、其余均分剩余空间：给 logo 设
flex: 0 0 120px，其他设flex: 1
注意：flex-basis: 0 是等宽的关键——它清空了原始内容宽度的影响，让 flex-grow 真正起作用。
处理换行、对齐与响应式断点
默认 flex-wrap: nowrap，超出容器就溢出或横向滚动。真正在移动端适配，不能只靠 flex-wrap: wrap，那会导致菜单折成两行，体验很差。
更实际的做法是：
- 小屏幕下用媒体查询切换为
flex-direction: column+flex-wrap: nowrap，配合汉堡菜单逻辑 - 中屏（如平板）可设
flex-wrap: wrap，但需限制最大行数并用align-content: flex-start防止上下空隙过大 - 始终设置
justify-content：常用值有space-between（两端对齐，首尾贴边）、center（居中）、flex-end（右对齐）
别忽略 align-items: center —— 它让文字垂直居中，否则文字常会偏上。
兼容性与常见失效原因
IE10+ 支持 flex，但语法不同（如 display: -ms-flexbox）。如果项目需兼容 IE10/11，必须加前缀，且避免使用 flex: 1 1 auto 这类简写（IE 对简写解析不稳定）。
更常遇到的是“flex 不生效”，排查顺序建议：
- 检查父容器是否被
float、position: absolute或display: inline干扰 - 确认没有意外继承了
flex-direction: column或其它 flex 相关样式 - 浏览器开发者工具里看 computed 样式，确认
display确实是flex，而非被覆盖为block
flex 布局本身很简单，难的是它和现有 CSS 规则（尤其是重置样式、BFC 触发、inline 元素默认行为）之间的隐性冲突。动手前先看一眼父级和相邻元素的 display 和 position。
