用 display: flex 可实现 logo 和导航栏并排，关键在于 header 设为 flex 容器、子元素同级嵌套、清除默认间距，并配合 flex-wrap 和媒体查询适配移动端。
头部标志（logo）和导航栏并排显示，不是靠“浮动”或“绝对定位”硬凑出来的，而是用现代 CSS 的 display: flex 一行代码就能稳住布局 —— 但很多人卡在父容器没设宽、子元素没设对齐方式、或者 HTML 结构嵌套错位上。
为什么 <header></header> 里 logo 和 nav 总是上下堆叠？
浏览器默认把块级元素（比如 <div>、<code><nav></nav>）垂直堆叠。即使你把 <img> 和 <nav></nav> 写在同一行，它们仍是两个独立块，不会自动并排。
- 检查是否漏了给
<header></header>或包裹容器加display: flex - 确认
<nav></nav>没被意外设成display: block或width: 100%（会强制换行） - 避免用
<table> 或多层 <code><div> 套娃来“模拟”并排 —— 语义错、维护难、响应式崩溃 <h3>用 <code>flex实现并排的最小可行写法不需要框架、不依赖 JS，纯 HTML + CSS 就能搞定。关键就三步：
- HTML 中让 logo 和 nav 同级，都放在
<header></header>下：<header> @@##@@ <nav><a href="#home">首页</a> <a href="#about">关于</a> </nav></header> - CSS 只写一句：
header { display: flex; align-items: center; }（align-items: center让 logo 和文字垂直居中对齐） - 如果 nav 文字挤在一起，加
nav a { margin-left: 1rem; }控制间距；别用<br>或空格硬调
移动端一缩就错位？记得加
@media断点桌面端并排很稳，但手机屏一窄，nav 文字就换行或溢出 —— 这不是 flex 失效，而是没告诉它“窄了该怎么收”。
- 默认 flex 容器是
flex-wrap: nowrap，内容超宽就会横向溢出，看不见 - 加一句
@media (max-width: 768px) { header { flex-direction: column; } }，小屏自动变上下排列 - 更优解：用
flex-wrap: wrap+nav { flex: 1; }，让 nav 自适应剩余宽度，logo 固定，不抢空间
真正容易被忽略的是：logo 图片没设
height或max-height，导致在高 DPI 屏或缩放时撑开整个 header；还有<nav></nav>里用了<ul><li></ul>却忘了清掉margin和padding，视觉上还是错位 —— 这些细节比“怎么并排”更能决定最终效果是否干净。
- HTML 中让 logo 和 nav 同级，都放在
