本文详解 gap、justify-content 与嵌套 Flex 容器的协同关系，说明为何在父容器设 space-between 时子元素仍挤在一起，并提供兼容性好、语义清晰的间距控制方案。
本文详解 `gap`、`justify-content` 与嵌套 flex 容器的协同关系，说明为何在父容器设 `space-between` 时子元素仍挤在一起，并提供兼容性好、语义清晰的间距控制方案。
在使用 Flex 布局构建导航栏（如 .nav-bar）时，开发者常遇到“子元素间距异常”的问题：当父容器 和
，因此 space-between 仅将这两者撑开，而
内部的
此时，正确的做法是将间距逻辑下沉到 .nav-bar 自身，而非依赖父级布局干预。现代 CSS 提供了更直观、更可靠的解决方案：gap 属性。
header {
display: flex;
align-items: center;
justify-content: space-between; /* 仅分隔 img 和 ul */
}
.nav-bar {
list-style: none;
display: flex;
flex-direction: row;
gap: 3rem; /* ✅ 推荐：为 li 之间添加统一间隙 */
/* 可选：增强响应性 */
margin: 0;
padding: 0;
}
⚠️ 注意事项：
- HTML 中应使用 class="nav-bar" 而非 className（后者是 React JSX 语法，原生 HTML 不识别）；
- gap 在所有现代浏览器中已获全面支持（Chrome 84+、Firefox 63+、Safari 14.1+），无需前缀；
- 若需兼容极老浏览器（如 IE），可回退使用 margin-right 配合 :not(:last-child)，但会增加维护成本；
- 避免同时设置 justify-content: space-evenly 和 gap —— 二者功能重叠且 gap 更精准可控；若需两端对齐+等距，gap 已足够。
完整示例结构如下：
<header><img src="https://picsum.photos/id/237/200/300?x-oss-process=image/resize,p_40" style="max-width:90%" alt="Logo"><ul class="nav-bar">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul></header>
总结：Flex 布局中，间距控制应遵循“谁渲染谁负责”原则——子容器（.nav-bar）应自主管理其内部项目的间距，优先使用语义明确、行为稳定的 gap 属性；父容器（
