用 flex 实现导航栏 logo 居左、菜单居右，需将 nav 设为 flex 容器，logo 和菜单作为两个独立子元素；通过 display: flex、justify-content: space-between 和 align-items: center 实现左右分离与垂直居中，并建议菜单 ul 也设为 flex 布局以简化间距控制。
用 Flex 实现导航栏 Logo 居左、菜单居右，核心是把整个导航容器设为弹性布局，并让 Logo 和菜单成为两个独立的 flex 项目，再通过对齐属性自然分离。
结构要分清：Logo 和菜单不能混在同一个列表里
常见错误是把 Logo 当作 <a></a> 放进导航 <ul></ul>，导致样式难控制。正确做法是把 Logo 单独抽出来，和菜单并列放在父容器中：
-
<nav class="topnav"></nav>作为 flex 容器 -
<div class="logo"><img src="logo.png" alt="品牌"></div>—— 左侧独立区块 -
<div class="menu"><ul> <li>首页</li> <li>产品</li> </ul></div>—— 右侧整体作为一个项目
CSS 关键三步：display + justify-content + align-items
给 .topnav 加这三条规则就能搞定基础对齐：
-
display: flex—— 激活弹性布局 -
justify-content: space-between—— 把第一个子元素（Logo）推到最左，最后一个（菜单）推到最右 -
align-items: center—— 让 Logo 和菜单文字/图标在高度方向上垂直居中
如果想留点边距，加一句 padding: 0 20px 防止贴边。
菜单内部也要用 Flex 控制间距
菜单 <ul></ul> 本身建议也设为 flex，方便统一控制项间距和对齐：
display: flex-
gap: 1.5rem—— 替代老式 margin，更干净 -
list-style: none和margin: 0; padding: 0清掉默认样式
响应式小技巧：小屏时菜单收起成汉堡按钮
Flex 布局天然适配响应式。加媒体查询即可：
- 小屏下把
.menu设为display: none - 同时显示一个
.hamburger按钮，点击展开菜单 - 菜单容器用
flex-direction: column垂直排列，避免横排溢出
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
