Flex布局导航栏对齐核心是justify-content控主轴（水平）对齐，align-items控交叉轴（垂直）对齐；水平居中用justify-content:center，垂直居中需设高度后配align-items:center，三段式用space-between加中间容器嵌套flex居中，响应式通过flex-wrap或column配合媒体查询实现。
用 Flex 布局做导航栏对齐，核心是搞清楚 justify-content 和 align-items 分别管什么：前者控制主轴（默认水平）上的对齐，后者控制交叉轴（默认垂直）上的对齐。导航栏通常是横向排列的，所以主轴是水平方向。
让导航项在一行内水平居中对齐
给导航容器（比如 <nav> 或 <ul>）设为 flex，并用 justify-content: center：
nav {
display: flex;
justify-content: center; /* 所有导航项整体水平居中 */
}注意：这会让整组 <a> 或 <li> 在容器里居中排布，不是每个项自己居中。
让导航项高度一致、文字垂直居中
导航栏常需要所有链接上下居中显示，这时靠 align-items: center：
立即学习“前端免费学习笔记（深入）”；
nav {
display: flex;
align-items: center; /* 所有子元素在交叉轴（垂直方向）居中 */
height: 60px; /* 设个固定高，让 align-items 有参照 */
}如果没设高度，align-items: center 仍有效，但效果可能不明显——因为容器高度由内容撑开，建议显式设置高度或最小高度（min-height）。
左右两端固定 + 中间居中（常见三段式导航）
比如左侧 logo、中间菜单、右侧登录按钮。不用 JS，纯 CSS 可这样写：
- 给容器设
display: flex和justify-content: space-between - 把中间部分（如
<ul>）单独再包一层<div class="nav-center"> - 给这个中间容器加
display: flex和justify-content: center
这样左、中、右三块自动分配空间，中间菜单还能独立居中。
响应式下换行对齐（如小屏竖排）
加 flex-wrap: wrap 允许换行，再配合 justify-content 控制每行对齐方式：
nav {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 换行后每行依然居中 */
}搭配 @media 查询，在小屏时让 flex-direction: column，再用 align-items: center 让竖排菜单项水平居中。
