用Flexbox实现导航栏左右对齐需设容器display: flex，用justify-content控制分布或margin-left:auto推右，清除默认样式并适配响应式。
用 Flexbox 实现导航栏左右对齐非常简单，关键在于合理设置容器的 display: flex 和对齐属性，而不是靠浮动或 margin 折腾。
给导航容器设为 flex 布局
确保包裹所有导航项的父元素（比如 或
- 添加
display: flex - 默认主轴是水平方向，正好适合导航排列
- 移除旧的
float、inline-block或多余text-align，避免冲突
用 justify-content 分配主轴空间
左右对齐的核心是控制元素在行内的分布方式：
-
justify-content: space-between—— 左侧第一个元素贴左，右侧最后一个贴右，中间等距分开（适合 logo + 导航项 + 用户入口这类三段式布局） -
justify-content: space-around—— 每个元素两侧留相同空白，视觉更均衡 -
justify-content: flex-start（默认）—— 全部靠左；flex-end则全部靠右
让某部分“自动占位”实现精准左右分组
如果想左边放 logo，右边放登录/菜单按钮，中间留空，可用 margin-left: auto 或 margin-right: auto：
立即学习“前端免费学习笔记（深入）”；
- 给右侧的导航组（如
