Flex布局下站点头部3个Logo单词无法分隔，仅justify-content: space-around可生效

问题根因 #

• 你的头部容器.header-container设置了justify-content: center，所有flex子元素会沿主轴居中紧密排列，不会自动分配间距，所以三个单词完全挨在一起。
• 你写的hover选择器存在语法错误：.logo:hover p的含义是「选中被hover的.logo元素内部的p标签」，但你的.logo本身就是p标签，内部没有子p元素，所以hover放大效果不会生效。

解决方案 #

场景1：需要固定单词间距（推荐，兼容性好、可控性高） #

直接给.logo类添加左右外边距即可，你可以自行调整数值控制间距大小：

.logo {
  color: white;
  font-family: 'Titillium Web', sans-serif;
  font-size: 25px;
  /* 新增以下行，左右间距15px，可自行调整 */
  margin: 0 15px;
}
/* 修正hover选择器 */
.logo:hover {
  transition: 2000ms;
  font-size: 30px;
}

场景2：需要三个单词在整个头部宽度上均匀分布 #

不需要改子元素样式，直接修改头部容器的justify-content属性即可，space-evenly比你提到的space-around分布更均匀（左右两侧留白和单词间的间距完全相等）：

.header-container {
  display: flex;
  width: 100%;
  height: 50px;
  background-color: #282828;
  border-radius: 10px;
  align-items: center;
  /* 把center替换为space-evenly */
  justify-content: space-evenly;
}

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