如何在flex容器中水平分隔元素，实现左logo、中标题、右图标布局

你现有代码的核心问题是justify-content属性仅作用于Flex容器，给子元素.logo设置该属性无效，同时容器设置justify-content: center会让三个子元素整体居中，无法实现两端对齐的需求。

将CSS修改为以下内容即可实现logo居左、图标居右、标题居中的效果：

.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 可选：添加左右内边距，避免内容紧贴屏幕边缘 */
  padding: 0 16px;
}

/* 若需要标题严格基于整个header宽度居中，不受左右元素宽度影响，可添加以下规则 */
.title .subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: 50%;
  text-align: center;
}

规则说明 #

• 仅使用justify-content: space-between的情况下，标题会在logo和图标之间的剩余空间居中，适合左右两侧元素宽度相近的场景
• 添加.subtitle的绝对定位规则后，标题会完全相对于header宽度居中，适合对居中精度要求高的场景，设置max-width可以避免标题过长时和两侧元素重叠。

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