答案是使用 justify-content: flex-end 实现导航栏项目右对齐。首先构建HTML导航结构，然后通过CSS将父容器设为 display: flex 并设置 justify-content: flex-end，使子元素沿主轴右侧对齐，同时清除列表默认样式并添加间距。可选响应式设计，在小屏幕上切换为纵向排列和居中对齐，提升移动端体验。关键步骤包括设置Flexbox布局、调整对齐方式及处理默认样式细节。
要使用Flexbox将导航栏中的项目右对齐，关键在于设置容器的 justify-content: flex-end。这个属性控制主轴上的对齐方式，在水平排列时能让所有子元素靠向容器右侧。
1. 基本结构：HTML 导航栏
先写一个简单的导航结构：
<nav class="navbar"><ul class="nav-list">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
2. 使用 justify-content: flex-end 实现右对齐
给导航列表应用 Flexbox 并设置对齐方式：
.navbar {width: 100%;
padding: 10px;
}
.nav-list {
display: flex;
justify-content: flex-end;
list-style: none;
margin: 0;
padding: 0;
}
.nav-list li {
margin-left: 20px;
}
.nav-list a {
text-decoration: none;
color: #333;
}
这里的关键是 justify-content: flex-end，它让所有列表项从右侧开始排列。
立即学习“前端免费学习笔记（深入）”；
3. 可选增强：响应式与居中回退
在小屏幕上，可以改为居中或垂直排列：
@media (max-width: 768px) {.nav-list {
flex-direction: column;
align-items: flex-start;
}
.nav-list li {
margin: 5px 0;
}
}
这样在移动端更易操作，同时保持桌面端的右对齐布局。
基本上就这些。只需设置父容器为 display: flex 并加上 justify-content: flex-end，就能轻松实现导航栏右对齐，不复杂但容易忽略细节如清除默认 margin 和 list-style。
