将容器设为 display: flex 并使用 flex-direction: column 实现垂直布局，2. 设置 height: 100vh 使导航栏占满视口高度，3. 通过 justify-content 和 align-items 控制子项对齐，4. 为 .nav-item 添加内边距、文字居中和悬停效果以提升交互性。
使用 CSS Flexbox 实现垂直导航栏非常直接。关键在于将容器设为 Flexbox 布局，并让子元素（导航项）沿列方向排列。下面是一个实用且结构清晰的实现方式。
将父容器设置为 display: flex，并通过 flex-direction: column 让导航项垂直堆叠。
示例代码：
.nav-container {
display: flex;
flex-direction: column;
height: 100vh; /* 占满视口高度 */
width: 200px;
background-color: #f4f4f4;
}
给每个导航项设置基本样式，如内边距、文字对齐和悬停效果，提升可读性和交互性。
.nav-item {
padding: 15px 20px;
text-align: center;
text-decoration: none;
color: #333;
transition: background-color 0.3s;
}
<p>.nav-item:hover {
background-color: #ddd;
}
若想让文字在导航项中水平居中或垂直对齐，可以结合 Flexbox 的对齐属性进一步优化。
立即学习“前端免费学习笔记（深入）”；
.nav-container {
justify-content: center; /* 垂直居中所有项 */
align-items: stretch; /* 横向拉伸子项 */
}
justify-content 控制主轴（这里是纵向）对齐，align-items 控制交叉轴（横向）对齐。
基本上就这些。用 Flexbox 做垂直导航栏不复杂但容易忽略细节，比如容器高度和方向设置。只要结构清晰，样式调整就很灵活。
以上就是如何用css Flexbox实现垂直导航栏的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
110
收藏
