本文讲解如何通过移除 justify-content: space-between 并合理设置 Flex 布局，精准控制 Logo 与导航菜单的间距，实现两侧留白均等、视觉居中的布局效果。
本文讲解如何通过移除 `justify-content: space-between` 并合理设置 flex 布局，精准控制 logo 与导航菜单的间距，实现两侧留白均等、视觉居中的布局效果。
在默认的 Flex 布局中，若对容器（如 .nav）设置了 justify-content: space-between，浏览器会将第一个子元素（Logo）强制推至容器最左端，最后一个子元素（
- 导航列表）推至最右端，中间所有空间被拉伸填充——这正是导致 Logo 与菜单“彼此远离”、中间出现不可控空白的根本原因。
要让 Logo 和导航菜单自然靠拢、居中对齐，同时保持左右外边距一致，关键在于：
✅ 移除 justify-content: space-between
✅ 保留 display: flex 和 align-items: center（确保垂直居中）
✅ 使用 margin: 10px 100px 维持整体水平内边距（即左右各留 100px 空白）
✅ 让两个子元素（ 和
- ）按文档流顺序紧邻排列，再通过 margin 或 gap 微调间距（如需）
优化后的 CSS 如下：
.nav {
display: flex;
align-items: center;
margin: 10px 100px; /* 左右各留 100px，保证外侧空白对称 */
gap: 24px; /* 可选：在 Logo 和菜单间添加统一间距，替代手动 padding/margin */
}
.nav .logo {
width: 120px;
height: auto;
}
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
padding: 8px 12px;
}
ul li a {
text-decoration: none;
color: #333;
}
? 注意事项：
- gap 属性兼容性良好（现代浏览器均支持），比在 li 或 .logo 上单独加 margin-right 更简洁可控；
- 若需兼容旧版 Safari（ 添加偏移（例如 margin-left: 24px），但需同步重置 ul 的默认 margin；
- 避免对 .nav 同时使用 justify-content: space-between 和 margin 混合控制，易引发布局冲突；
- 建议为图片添加 height: auto 和 vertical-align: middle，防止因基线对齐产生意外间隙。
最终效果：Logo 与导航菜单紧密相邻、水平居中，左右外边距严格相等，布局干净、语义清晰、响应友好。
