Flexbox弹性布局是目前前端开发中实现一维布局的首选方案，相比传统的浮动和定位布局，它能更简洁地控制子元素的排列、对齐和空间分配，非常适合用来构建导航栏这类横向排列的组件。
基础导航栏结构搭建
首先我们需要构建导航栏的基础HTML结构，通常导航栏由外层的导航容器和内部的导航项列表组成，代码如下：
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">首页</li>
<li class="nav-item">产品中心</li>
<li class="nav-item">解决方案</li>
<li class="nav-item">关于我们</li>
<li class="nav-item">联系我们</li>
</ul>
</nav>实现导航项水平居中
要让导航项整体在导航栏中水平居中，只需要给导航列表容器设置Flexbox布局，然后使用justify-content属性即可。相关CSS代码如下：
.navbar {
background-color: #2c3e50;
padding: 0 20px;
height: 60px;
display: flex;
align-items: center; /* 垂直居中 */
}
.nav-list {
display: flex;
justify-content: center; /* 水平居中所有导航项 */
list-style: none;
margin: 0;
padding: 0;
width: 100%; /* 容器占满父元素宽度 */
}
.nav-item {
color: #ffffff;
padding: 0 20px;
line-height: 60px;
cursor: pointer;
transition: background-color 0.3s;
}
.nav-item:hover {
background-color: #34495e;
}这里justify-content: center的作用就是让nav-list内部的子元素（即导航项）沿主轴水平居中对齐，搭配外层的align-items: center就能实现导航项在导航栏中完全居中。
实现导航项等宽布局
如果需要所有导航项的宽度相等，只需要给导航项添加flex: 1属性，该属性会让子元素自动分配父容器的剩余空间，实现等宽效果。修改CSS代码如下：
.nav-item {
color: #ffffff;
padding: 0 20px;
line-height: 60px;
cursor: pointer;
transition: background-color 0.3s;
flex: 1; /* 等宽分配空间 */
text-align: center; /* 文字居中 */
}
.nav-list {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}flex: 1是flex-grow: 1、flex-shrink: 1、flex-basis: 0%的简写，意味着所有导航项会按照相同的比例分配父容器的可用空间，自然就实现了等宽效果，同时添加text-align: center可以让导航项内的文字居中显示。
实现响应式导航栏
在小屏幕设备上，横向排列的导航项可能会出现拥挤或者换行的问题，我们可以通过媒体查询调整布局，当屏幕宽度小于768px时，将导航项改为纵向排列，或者调整排列方式。实现代码如下：
/* 大屏幕样式沿用之前的设置 */
.nav-list {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
/* 小屏幕响应式调整 */
@media screen and (max-width: 768px) {
.navbar {
height: auto;
padding: 10px 20px;
}
.nav-list {
flex-direction: column; /* 纵向排列 */
align-items: center; /* 垂直方向居中 */
}
.nav-item {
width: 100%; /* 占满容器宽度 */
line-height: 50px;
border-bottom: 1px solid #34495e;
}
.nav-item:last-child {
border-bottom: none;
}
}通过flex-direction: column改变主轴方向为垂直方向，导航项会从上到下排列，同时设置导航项宽度为100%，保证在小屏幕上每个导航项都能完整显示，点击区域也更友好。
完整示例代码
以下是整合了居中、等宽、响应式功能的完整代码，可以直接复制到本地运行查看效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox导航栏示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
background-color: #2c3e50;
padding: 0 20px;
height: 60px;
display: flex;
align-items: center;
}
.nav-list {
display: flex;
justify-content: center;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.nav-item {
color: #ffffff;
padding: 0 20px;
line-height: 60px;
cursor: pointer;
transition: background-color 0.3s;
flex: 1;
text-align: center;
}
.nav-item:hover {
background-color: #34495e;
}
@media screen and (max-width: 768px) {
.navbar {
height: auto;
padding: 10px 20px;
}
.nav-list {
flex-direction: column;
align-items: center;
}
.nav-item {
width: 100%;
line-height: 50px;
border-bottom: 1px solid #34495e;
}
.nav-item:last-child {
border-bottom: none;
}
}
</style>
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item">首页</li>
<li class="nav-item">产品中心</li>
<li class="nav-item">解决方案</li>
<li class="nav-item">关于我们</li>
<li class="nav-item">联系我们</li>
</ul>
</nav>
</body>
</html>常见问题说明
- 如果导航项内容长度差异很大，等宽布局可能会导致内容过长的项文字换行，可以给
nav-item添加white-space: nowrap禁止换行，或者调整flex属性的分配比例。 - 响应式断点可以根据实际需求调整，比如平板设备可以保留横向布局，只在手机端切换为纵向布局。
- 如果需要给导航栏添加logo，只需要在
navbar容器内、nav-list之前添加logo元素，再调整Flexbox的对齐属性即可。