Flexbox容器无法填满宽度 子元素左右对齐失效如何解决

• justify-content是flex容器的专属属性，直接写在logo、nav、header-sm这类flex子项上不会产生任何对齐效果
• 多数浏览器默认给html、body标签添加8px外边距，即使给header设置width: 100%，也会因为父元素的默认边距导致header没法完全贴住视口边缘
• 实现单个flex子项靠右对齐不需要在子项上设置对齐属性，利用flex布局的margin: auto特性即可实现需求。

直接调整CSS即可，原有HTML结构不需要改动：

/* 清除浏览器默认边距，保证父元素占满全宽，避免干扰header宽度 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center; /* 可选属性：让子项垂直居中，适配header自定义高度 */
  /* 不需要额外设置justify-content，flex默认值flex-start就是子项靠左排列 */
}

/* 给需要靠右的子项设置左外边距自动，自动填充左侧所有剩余空间，将元素推到容器最右边缘 */
header .header-sm {
  margin-left: auto;
}

对应的HTML沿用原有结构即可：

<header>
  <div class="logo"></div>
  <nav></nav>
  <div class="header-sm"></div>
</header>

• 如果需要调整左侧logo和导航的间距，直接给对应元素加margin，或者给header容器加gap属性即可，不需要改动对齐逻辑
• 如果后续需要新增多个靠右排列的元素，只需要把margin-left: auto加在第一个需要靠右的元素上，后续的靠右元素会正常跟在它后面排列
• 如果需要给子项内部的内容做对齐，再给对应子项设置display: flex加justify-content即可，不要直接在普通子项上使用该属性。

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