css 如何实现简单导航栏布局_利用 flexbox 控制水平排列

display: flex 比 Float 更可靠，因 float 脱离文档流致父容器塌陷，需清浮动；flex 是布局上下文，子项默认不换行、主轴排列，无需 hack，且 IE10+ 兼容良好。

导航栏用 display: flex 为什么比 float 更可靠

因为 float 会脱离文档流，导致父容器高度塌陷，必须额外清浮动；而 flex 是布局上下文本身，子项默认不换行、自动沿主轴排列，无需 hack。现代项目中，只要支持 IE10+（flex 基础属性兼容良好），就该优先用 flex。

nav 容器的必要 flex 设置

只写 display: flex 不够，常见遗漏点包括：

• justify-content: space-between 或 space-around 控制项间距，避免手动加 margin
• align-items: center 垂直居中文字和图标，否则链接可能上下错位
• 给 nav 设 height 或 line-height 时，要确认子项 a 没有默认 vertical-align: baseline 干扰对齐
• 若需响应式折叠，先确保主轴方向是 row（默认值），别误设 flex-direction: column

nav {   display: flex;   justify-content: space-between;   align-items: center;   padding: 0 1rem;   background: #333; }  nav a {   color: white;   text-decoration: none;   padding: 0.5rem 1rem; }

a 标签在 flex 中的常见表现问题

直接把 a 当 flex item 用没问题，但要注意：

• a 默认是 inline 元素，在 flex 容器中会自动变成 flex-item，但若内部有 img 或 span，可能因基线对齐导致高低不一
• 点击区域小？给 a 加 display: block 或 inline-block 并设 padding，别只靠 line-height
• hover 效果失效？检查是否被父级 overflow: hidden 截断，或 a 的 z-index 被其他层覆盖
• 移动端点击延迟？那是浏览器默认行为，和 flex 无关，需加 touch-action: manipulation

水平等宽导航项的两种稳妥写法

要让每个菜单项宽度均分，不能只靠 flex: 1 —— 它会让内容撑开，文字长短不同会导致宽度不一致。真正可控的是：

立即学习“前端免费学习笔记（深入）”；

• 方案一：所有 a 设 flex: 1 + text-align: center，适合文字长度接近的场景
• 方案二：用 flex: 1 1 0（即 flex-grow: 1; flex-shrink: 1; flex-basis: 0），强制从零开始均分剩余空间，文字再长也不会挤占别人位置

nav a {   flex: 1 1 0;   text-align: center;   padding: 0.75rem 0; }

实际项目里，flex-basis: 0 这个细节最容易被忽略，不写它，flex: 1 就会按内容宽度为基准再伸缩，结果反而不均等。