使用CSS Flexbox实现垂直导航栏是非常高效的布局方案，只需要通过简单的属性配置就能控制导航项的排列方向、对齐方式和间距，不需要复杂的浮动或者定位计算，适配各种页面场景。
基础HTML结构搭建
首先我们需要搭建垂直导航栏的基础HTML结构，通常导航栏外层是一个容器元素，内部包含多个导航项，每个导航项可以包含链接或者图标内容，基础结构如下：
<nav class="vertical-nav"> <div class="nav-item">首页</div> <div class="nav-item">产品中心</div> <div class="nav-item">解决方案</div> <div class="nav-item">关于我们</div> <div class="nav-item">联系我们</div> </nav>
Flexbox核心属性配置
要让导航项垂直排列，核心是给导航容器设置Flexbox相关属性，首先需要开启容器的Flex布局，然后调整排列方向为垂直方向，具体CSS代码如下：
/* 导航容器样式 */
.vertical-nav {
display: flex; /* 开启Flex布局 */
flex-direction: column; /* 设置排列方向为垂直，默认值row是水平 */
width: 200px; /* 设置导航栏宽度 */
background-color: #f5f5f5; /* 导航栏背景色 */
padding: 10px 0; /* 上下内边距 */
}
/* 导航项样式 */
.nav-item {
padding: 12px 20px; /* 导航项内边距 */
cursor: pointer; /* 鼠标悬停显示手型 */
transition: background-color 0.2s; /* 背景色过渡效果 */
}
/* 导航项悬停效果 */
.nav-item:hover {
background-color: #e0e0e0;
}
关键属性说明
display: flex：将元素设置为Flex容器，内部的直接子元素会自动成为Flex项目flex-direction: column：指定Flex项目的排列方向为垂直方向，从上到下排列，这是实现垂直导航的核心属性- 如果不需要固定宽度，也可以将导航容器设置为
inline-flex，容器宽度会跟随内容自适应
导航项对齐与间距优化
如果需要对齐导航项的内容，或者调整导航项之间的间距，可以通过Flexbox的其他属性实现，常见的优化需求如下：
水平居中对齐导航内容
如果希望导航项的文字在水平方向居中，可以设置align-items属性：
.vertical-nav {
display: flex;
flex-direction: column;
width: 200px;
background-color: #f5f5f5;
padding: 10px 0;
align-items: center; /* 水平居中对齐所有导航项 */
}
设置导航项之间的间距
可以使用gap属性直接设置导航项之间的间距，不需要给每个导航项单独设置margin：
.vertical-nav {
display: flex;
flex-direction: column;
width: 200px;
background-color: #f5f5f5;
padding: 10px 0;
gap: 8px; /* 导航项之间的垂直间距为8px */
}
带链接的完整导航示例
实际开发中导航项通常是可点击的链接，我们可以结合<a>标签实现完整的垂直导航栏，代码如下：
<nav class="vertical-nav">
<a href="/" class="nav-link">首页</a>
<a href="/products" class="nav-link">产品中心</a>
<a href="/solutions" class="nav-link">解决方案</a>
<a href="/about" class="nav-link">关于我们</a>
<a href="/contact" class="nav-link">联系我们</a>
</nav>
<style>
.vertical-nav {
display: flex;
flex-direction: column;
width: 220px;
height: 100vh; /* 导航栏高度占满整个视口 */
background-color: #2c3e50;
padding-top: 20px;
}
.nav-link {
color: #ecf0f1;
text-decoration: none; /* 去掉链接下划线 */
padding: 14px 24px;
transition: background-color 0.3s, color 0.3s;
}
.nav-link:hover {
background-color: #34495e;
color: #ffffff;
}
</style>
常见问题处理
问题1：导航项没有垂直排列？
检查是否给导航容器设置了flex-direction: column，如果只设置了display: flex，默认是水平排列。
问题2：导航容器高度没有占满父元素？
可以给导航容器设置height: 100%或者height: 100vh，确保容器有足够的高度显示所有导航项。
问题3：导航项内容溢出怎么办？
可以给导航项设置overflow: hidden和text-overflow: ellipsis，处理过长的文字内容。