CSS header内logo无法对齐屏幕最左且修改样式引发元素堆叠问题

问题根源 #

你调整logo时头部元素堆叠、logo无法单独对齐左对齐的核心原因是现有header的两个样式规则：

• #header设置了padding-left: 20%，所有头部元素整体向右缩进20%，logo自然无法对齐屏幕最左侧
• justify-content: space-evenly规则是让所有子元素均匀分配容器剩余空间，修改任意子元素的边距都会牵一发而动全身，影响其他元素的位置

解决方案 #

仅需要修改2处CSS代码即可实现需求，导航位置完全不变，logo对齐最左侧：

1. 修改#header的样式规则：

#header{
  padding-left: 20px; /* 若需要logo完全贴紧屏幕左边缘可将该值改为0，保留20px可避免logo贴边太突兀 */
  width: 100%;
  background: #FFF;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center; /* 将原有的space-evenly改为center，保证导航元素保持原有居中位置 */
  align-items: center;
}

2. 给#header #logo新增一行规则：

#header #logo{
  font-style: italic;
  font-size: 20px;
  margin-right: auto; /* 新增这行，flex布局下会自动占据logo右侧所有剩余空间，将logo推到最左侧 */
}

实现原理 #

flex布局中，给子元素设置单侧auto边距时，浏览器会将容器内所有剩余空间分配到该侧，不会影响其他子元素的排布规则，因此导航元素会继续保持居中，不会发生位移或堆叠。

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