使用 Flexbox 可轻松实现导航栏布局，首先通过 display: flex 将 ul 设为弹性容器，清除默认样式后，利用 justify-content 控制水平对齐（如 center、space-between），align-items 实现垂直居中，结合 flex: 1 使 li 等宽分布，必要时设置固定宽度或响应式换行，@media 可在小屏切换为 column 堆叠，整体结构清晰且易于维护。
使用 Flexbox 实现导航栏布局是现代前端开发中的常见做法，它能轻松实现水平对齐、垂直居中、等宽分布和响应式适配。以下是具体实现方法与 ul li 排列优化技巧。
1. 基础 Flex 导航栏结构
从 HTML 结构开始，使用语义化的 nav 包裹无序列表：
<nav class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
对应的 CSS 设置容器为 flex 模式：
.navbar ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
2. 控制 li 项目对齐方式
通过 Flexbox 的主轴与交叉轴属性控制排列效果：
立即学习“前端免费学习笔记（深入）”；
- 水平居中：在容器上添加 justify-content: center;
- 两端对齐：使用 justify-content: space-between 让首尾项贴边，中间等距
- 平均分布：justify-content: space-around 或 space-evenly 更均匀分配空白
- 垂直居中：align-items: center 可使导航项在容器中垂直居中
例如让菜单项左右撑满且文字居中：
.navbar ul {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
background: #333;
}
3. 优化 li 宽度与弹性行为
默认情况下 li 会根据内容宽度排列。若希望每个菜单项等宽或自适应，可设置：
- 给每个 li 设置 flex: 1 实现等分父容器宽度
- 若部分项需要固定宽度（如“登录”按钮），可设 flex: 0 0 auto 或指定 width
- 使用 min-width 防止文字换行
示例：所有菜单项等宽分布
.navbar li {
flex: 1;
text-align: center;
}
.navbar a {
display: block;
padding: 10px;
color: white;
text-decoration: none;
}
4. 响应式处理与换行支持
在小屏幕上，可通过媒体查询控制换行或折叠菜单：
- 添加 flex-wrap: wrap 允许换行
- 配合媒体查询，在移动端改为竖向堆叠或隐藏部分内容
- 结合 JavaScript 实现汉堡菜单（可选）
例如移动端堆叠显示：
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
}
.navbar li {
flex: none;
}
}
基本上就这些。Flexbox 极大简化了传统 float 或 inline-block 布局的复杂性，让导航栏结构更清晰、维护更方便。合理使用 justify-content、align-items 和 flex 属性，就能快速实现各种排列需求。不复杂但容易忽略细节，比如清除默认 margin/padding 和 list-style。搞定这些，导航栏基本一步到位。
