Flexbox导航栏两端对齐问题：使用justify-content:space-between未贴边

问题场景 #

• 桌面端导航栏布局改造中，将传统浮动实现替换为Flexbox方案，需要达成网站标题对齐导航栏最左侧、导航列表元素对齐导航栏最右侧的布局效果
• 参考常规Flexbox用法，给导航容器设置justify-content: space-between属性，按照规范该属性本应实现子元素沿容器两端分布的效果
• 实际渲染异常：左侧网站标题、右侧导航列表元素始终与导航栏边缘存在向内偏移，无法真正贴合导航栏左右边缘，达不到设计预期

常见根因与对应解法 #

1. 浏览器默认标签样式未清除 #

这是该类问题占比最高的诱因。浏览器对多数内置标签自带默认边距规则，比如给<body>设置的8px外边距、给<ul>列表设置的40px左内边距、给<h1>标题设置的默认上下外边距，这些默认样式会打断Flex布局的对齐基准，导致视觉上元素和导航栏边缘产生不必要的偏移。
对应解决方式为在全局样式最顶部添加基础样式重置，清除所有标签的默认边距，统一盒模型规则：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 导航容器自身设置了多余的边距 #

如果给包裹导航内容的容器（通常是<nav>或<header>标签）设置了左右方向的内边距、外边距，Flex布局的对齐基准会跟随容器的内容盒边界向内收缩，导致内部的标题、导航列表无法贴到导航栏的视觉边缘。
排查方式为临时给导航容器添加红色实线外边框outline: 1px solid red，查看容器的实际边界位置，确认容器本身的边界是否和预期的导航栏左右边缘完全重合，如果容器边界向内偏移，删除对应的padding、margin设置即可。

3. 导航内部子元素自带默认边距 #

即使容器本身的边距已经清零，导航栏内的标题标签、列表标签本身自带的默认边距也会造成视觉上的偏移。需要单独给这类元素清除默认样式，同时去掉列表默认的圆点标识：

/* 清除标题与列表的默认边距、列表默认标识 */
.site-title, .nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

4. 对Flex对齐边界的误解 #

需要明确：justify-content: space-between的对齐基准是Flex容器的内容盒边界，而非容器的外边缘。只要容器本身的边界和导航栏的预期左右边缘完全重合，该属性就会让子元素完全贴齐内容盒边界，不存在自动向内偏移的逻辑。如果出现偏移，一定是布局链路中某一层级的边距没有被清除，和space-between属性本身的规则无关。

内容的提问来源于stack exchange，提问作者eldutcho