在网页布局中，导航栏的样式调整是常见需求，使用Flexbox可以非常便捷地实现导航栏列表项居右对齐和垂直居中的效果，不需要复杂的浮动或者定位计算，适配性也更好。
核心实现思路
要实现导航栏列表项居右对齐和垂直居中，核心是通过设置Flex容器的两个关键属性：justify-content控制主轴方向的对齐方式，align-items控制交叉轴方向的对齐方式。导航栏通常是水平方向排列，主轴为水平方向，交叉轴为垂直方向，因此只需要针对这两个属性做对应设置即可。
具体实现步骤
1. 构建基础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>
</ul>
</nav>
2. 设置Flex容器属性
给导航栏的外层容器nav或者列表容器ul设置Flex布局，这里选择给ul设置Flex属性，同时设置justify-content: flex-end让子项在主轴（水平方向）居右对齐，设置align-items: center让子项在交叉轴（垂直方向）居中。还需要清除列表默认的边距和项目符号，让布局更规整。
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
width: 100%;
height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
}
.nav-list {
/* 开启Flex布局 */
display: flex;
/* 主轴方向水平排列，子项居右对齐 */
justify-content: flex-end;
/* 交叉轴方向垂直居中 */
align-items: center;
/* 设置列表高度和导航栏一致，保证垂直居中生效 */
height: 100%;
/* 清除无序列表默认项目符号 */
list-style: none;
}
.nav-item {
margin-left: 20px;
}
.nav-item a {
text-decoration: none;
color: #333;
font-size: 16px;
padding: 8px 12px;
}
.nav-item a:hover {
color: #1890ff;
}
3. 效果验证
上述代码设置完成后，导航栏的列表项会自动靠右排列，并且在导航栏的垂直方向居中显示，即使调整导航栏的高度，列表项也会自动保持垂直居中，不需要额外调整边距。
常见问题说明
- 如果设置
align-items: center后没有垂直居中，需要检查Flex容器的高度是否明确设置，因为交叉轴的对齐需要容器有明确的高度作为参考。 - 如果需要导航栏同时有左侧的logo，只需要给
nav容器设置Flex布局，用justify-content: space-between分开左右内容，左侧放logo，右侧放导航列表即可。 - Flexbox的兼容性较好，主流现代浏览器都支持，如果需要适配极低版本的浏览器，可以添加对应的前缀。
完整效果演示
将上述HTML和CSS代码组合后，就可以得到符合要求的导航栏效果，整体代码简洁，维护成本很低，后续如果需要调整导航项之间的间距或者对齐方式，只需要修改对应的Flex属性即可。
<!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 {
width: 100%;
height: 60px;
background-color: #f5f5f5;
padding: 0 20px;
}
.nav-list {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
list-style: none;
}
.nav-item {
margin-left: 20px;
}
.nav-item a {
text-decoration: none;
color: #333;
font-size: 16px;
padding: 8px 12px;
}
.nav-item a:hover {
color: #1890ff;
}
</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>
</ul>
</nav>
</body>
</html>