用Flexbox实现导航栏左右对齐需设容器display: flex，用justify-content控制分布或margin-left:auto推右，清除默认样式并适配响应式。
用 Flexbox 实现导航栏左右对齐非常简单，关键在于合理设置容器的 display: flex 和对齐属性，而不是靠浮动或 margin 折腾。
给导航容器设为 flex 布局
确保包裹所有导航项的父元素（比如 <nav> 或 <ul>）启用了 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：
立即学习“前端免费学习笔记（深入）”；
- 给右侧的导航组（如
<div class="nav-right">）加margin-left: auto，它就会被“推”到最右边 - 多个分组时，只对需要分离的元素设 auto 边距，其他保持自然流
- 示例：
<nav><div class="logo">Logo</div><ul class="main-nav">...</ul><div class="user-actions" style="margin-left: auto;">登录</div></nav>
别忘了基础样式清理和响应适配
Flex 布局生效前，注意这些细节：
- 移除
<ul>默认的padding-left和<li>的list-style - 设
align-items: center让文字垂直居中（尤其配合高度不一的 logo 时） - 小屏幕下用
@media把flex-direction: column或隐藏部分项，再配合汉堡菜单
