Flex布局导航栏对齐核心是justify-content控主轴（水平）对齐，align-items控交叉轴（垂直）对齐；水平居中用justify-content:center，垂直居中需设高度后配align-items:center，三段式用space-between加中间容器嵌套flex居中，响应式通过flex-wrap或column配合媒体查询实现。
用 Flex 布局做导航栏对齐，核心是搞清楚 justify-content 和 align-items 分别管什么：前者控制主轴（默认水平）上的对齐，后者控制交叉轴（默认垂直）上的对齐。导航栏通常是横向排列的，所以主轴是水平方向。
让导航项在一行内水平居中对齐
给导航容器（比如 或 justify-content: center：
nav {
display: flex;
justify-content: center; /* 所有导航项整体水平居中 */
}注意：这会让整组 或 在容器里居中排布，不是每个项自己居中。
让导航项高度一致、文字垂直居中
导航栏常需要所有链接上下居中显示，这时靠 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 - 把中间部分（如
