使用Flex布局实现导航栏可通过display: flex设置容器，justify-content控制水平分布，align-items实现垂直居中，flex: 1使项目等宽自适应，配合清除默认样式完成高效布局。
使用CSS的Flex布局实现导航栏的水平分布与对齐非常高效且灵活。通过display: flex，可以轻松控制导航项的排列方式、间距和对齐效果，无需依赖浮动或定位。
1. 基础Flex导航结构
从HTML结构开始，通常使用<nav>包含一个无序列表：
<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
对应的CSS设置容器为Flex布局：
.navbar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
此时所有导航项已水平排列。
立即学习“前端免费学习笔记（深入）”；
2. 水平分布方式
通过justify-content控制主轴（水平）上的分布方式：
-
左对齐（默认）：
justify-content: flex-start; -
居中对齐：
justify-content: center; -
两端对齐，项目等距：
justify-content: space-between;—— 第一项靠左，最后一项靠右，中间均分空白 -
每项周围空间相等：
justify-content: space-around; -
每项之间和边缘的空间一致：
justify-content: space-evenly;
例如让导航项两端对齐：
.navbar ul {
display: flex;
justify-content: space-between;
padding: 0 20px;
}
3. 垂直对齐与高度控制
常需让文字在导航栏中垂直居中。可通过设置容器高度并使用align-items：
.navbar {
height: 60px;
background-color: #333;
}
<p>.navbar ul {
display: flex;
align-items: center; /<em> 垂直居中 </em>/
height: 100%;
}</p>链接样式也可统一设置：
.navbar a {
color: white;
text-decoration: none;
padding: 10px 15px;
}
4. 自动等宽分布技巧
若希望每个导航项宽度相等并自动填充容器，可结合flex: 1：
.navbar ul {
display: flex;
}
<p>.navbar li {
flex: 1; /<em> 每个项平均分配可用空间 </em>/
text-align: center;
}</p>这样即使屏幕变窄，项目仍保持等宽分布，适合移动端适配。
基本上就这些关键点：用display: flex开启弹性布局，justify-content控制水平分布，align-items处理垂直对齐，再配合flex: 1实现自适应等宽。不复杂但容易忽略细节，比如清除默认内外边距和列表样式。
