用flex实现两端对齐导航栏的关键是结构分离、容器设flex、对齐靠属性：logo与菜单作为nav下两个并列子元素；.topnav设display: flex、justify-content: space-between、align-items: center；菜单内ul用display: flex加gap控制间距；需部分右对齐时给对应li加margin-left: auto。
用 Flex 布局做两端对齐的导航栏，关键不是“塞满”或“手动算位置”，而是让容器自动分配空间、把元素自然推到左右边缘。核心就三点：结构分清、容器设 flex、对齐靠属性。
结构必须拆开 Logo 和菜单
别把 Logo 塞进导航 <ul></ul> 里——那是最常踩的坑。正确结构是让 Logo 和菜单成为 <nav></nav> 的两个并列子元素：
-
<nav class="topnav"></nav>是父容器 -
<div class="logo"><img src="logo.png"></div>单独放左边 -
<div class="menu"><ul> <li>首页</li> <li>产品</li> </ul></div>整体当一个模块放右边
父容器三行 CSS 就搞定对齐
给 .topnav 加这三条规则：
-
display: flex—— 激活弹性布局，子元素自动横排 -
justify-content: space-between—— 第一个子元素（Logo）贴左，最后一个（菜单 div）贴右 -
align-items: center—— 让 Logo 图片和菜单文字在高度方向上垂直居中
加一句 padding: 0 20px 可避免内容顶到浏览器边缘。
菜单内部也用 Flex 控制间距
别再用 margin-left 或浮动调菜单项间距。直接给 .menu ul 设为 Flex：
display: flex-
gap: 1.5rem—— 项与项之间统一留空，干净不塌陷 - 需要响应式时，可配合
flex-wrap: wrap防止窄屏溢出
想让部分菜单靠右、部分靠左？用 margin-left: auto
如果结构是 Logo + 首页 + 关于 + 登录 + 注册，想让“登录”“注册”贴右，其余贴左，不用拆容器：
- 保持所有
<li>在同一个<ul></ul>内 - 给第一个想右对齐的
<li>（比如“登录”）加margin-left: auto - 它和它右边的所有项就会被整体推到右侧，左侧项自然靠左
