使用 flex 布局可轻松实现导航栏水平 排列 与对齐控制，首先通过 display: flex 设置容器为 弹性布局 ，结合 justify-content 与 align-items 实现项目分布与 垂直居中 ，再通过 flex: 1 让菜单项均匀占满宽度，适用于 响应式设计。
实现导航栏的 Flex 布局非常简单，只需要使用 css 的 display: flex 属性，就能让导航项水平 排列 并轻松控制对齐方式、间距和响应式行为。下面是一个实用且常见的实现方法。
1. 基础 html 结构
先写一个简单的导航结构：
<nav class=”navbar”>
<div class=”logo”>Logo</div>
<ul class=”nav-links”>
<li><a href=”#”> 首页 </a></li>
<li><a href=”#”> 关于 </a></li>
<li><a href=”#”> 服务 </a></li>
<li><a href=”#”> 联系 </a></li>
</ul>
</nav>
2. 使用 Flex 布局实现水平排列
通过 display: flex 让导航栏内容水平分布，并自动填充空间：
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #333;
color: white;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links a {
color: white;
text-decoration: none;
padding: 0.5rem 1rem;
}
.nav-links a:hover {
background-color: #555;
border-radius: 4px;
}
3. 关键属性说明
理解这几个 Flex 相关属性能更好控制布局：
立即学习 “ 前端免费学习笔记（深入）”；
- display: flex：开启 弹性布局，子元素变成弹性项目
- justify-content: space-between：两端对齐，项目之间等距分布（适合 logo 和菜单分开）
- align-items: center：垂直居中 对齐，让文字和 logo 在同一水平线
- flex-direction: row：默认横向排列（可省略）
4. 可选增强：让菜单项平均占满宽度
如果你希望导航项均匀分布，可以这样设置：
.nav-links {
flex: 1;
justify-content: center;
}
.nav-links li {
flex: 1;
text-align: center;
}
这样每个菜单项会平分容器宽度，适合移动端或简洁风格导航。
基本上就这些。Flex 布局让导航栏变得灵活又易于维护，兼容性好，适合大多数现代 网页设计 需求。
