使用Flexbox创建等宽响应式导航栏是前端布局中非常实用的技巧，核心是利用Flexbox的弹性分配特性，让导航项自动适配不同屏幕宽度，同时保持每个项的宽度相等，不需要手动计算百分比或者固定宽度。
基础HTML结构搭建
首先我们需要搭建导航栏的基础HTML结构，包含一个导航容器和多个导航项，结构越简洁后续样式控制越方便。
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item"><a href="#">首页</a></li>
<li class="nav-item"><a href="#">产品中心</a></li>
<li class="nav-item"><a href="#">解决方案</a></li>
<li class="nav-item"><a href="#">关于我们</a></li>
<li class="nav-item"><a href="#">联系我们</a></li>
</ul>
</nav>
核心Flexbox样式实现
接下来通过CSS设置Flexbox属性，实现导航项的等宽分配，这里主要用到display:flex、flex:1等属性。
导航容器样式
给导航列表容器设置Flexbox布局，同时清除默认的列表样式和内边距。
.nav-list {
display: flex; /* 启用Flexbox布局 */
list-style: none; /* 清除列表默认圆点 */
margin: 0;
padding: 0;
width: 100%; /* 容器占满父元素宽度 */
}
导航项等宽设置
给每个导航项设置flex:1属性，这个属性会让所有导航项平分容器的剩余空间，自然实现等宽效果。
.nav-item {
flex: 1; /* 所有项平分空间，实现等宽 */
text-align: center; /* 文字水平居中 */
}
.nav-item a {
display: block; /* 让链接占满整个导航项区域，方便点击 */
padding: 15px 0;
text-decoration: none;
color: #333;
background-color: #f5f5f5;
border-right: 1px solid #ddd; /* 分隔线 */
}
/* 最后一个导航项去掉右边框 */
.nav-item:last-child a {
border-right: none;
}
/* 鼠标悬停效果 */
.nav-item a:hover {
background-color: #e0e0e0;
}
响应式适配处理
在小屏幕设备上，横向排列的导航栏可能会挤在一起，文字换行影响美观，这时候可以通过媒体查询调整布局。
当屏幕宽度小于768px时，将导航项改为纵向排列，同时调整样式适配移动端。
@media screen and (max-width: 768px) {
.nav-list {
flex-direction: column; /* 改为纵向排列 */
}
.nav-item a {
border-right: none;
border-bottom: 1px solid #ddd; /* 纵向分隔线 */
}
.nav-item:last-child a {
border-bottom: none;
}
}
常见问题说明
- 如果导航项内容长度差异很大，
flex:1依然会保证所有项宽度相等，内容过长的项会自动换行，不需要额外设置宽度。 - 如果需要给导航容器设置最大宽度，避免在大屏幕上过宽，可以添加
max-width: 1200px; margin: 0 auto;到.navbar样式中。 - 如果需要固定某个导航项的宽度，给其他项设置
flex:1，给固定宽度的项设置具体宽度值即可，比如width: 120px;。
完整示例代码
以下是可直接运行的完整代码，复制后保存为HTML文件即可查看效果。
<!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>
.navbar {
max-width: 1200px;
margin: 0 auto;
}
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.nav-item {
flex: 1;
text-align: center;
}
.nav-item a {
display: block;
padding: 15px 0;
text-decoration: none;
color: #333;
background-color: #f5f5f5;
border-right: 1px solid #ddd;
}
.nav-item:last-child a {
border-right: none;
}
.nav-item a:hover {
background-color: #e0e0e0;
}
@media screen and (max-width: 768px) {
.nav-list {
flex-direction: column;
}
.nav-item a {
border-right: none;
border-bottom: 1px solid #ddd;
}
.nav-item:last-child a {
border-bottom: none;
}
}
</style>
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item"><a href="#">首页</a></li>
<li class="nav-item"><a href="#">产品中心</a></li>
<li class="nav-item"><a href="#">解决方案</a></li>
<li class="nav-item"><a href="#">关于我们</a></li>
<li class="nav-item"><a href="#">联系我们</a></li>
</ul>
</nav>
</body>
</html>