为何justify-content: space-between属性未生效？

你的justify-content: space-between没生效的核心问题是：.header作为flex容器，仅包含一个直接子元素（<h2 class="header-title">）。这个属性需要容器内有至少两个子元素，才能在它们之间分配剩余空间实现两端对齐效果，当前结构下该属性完全发挥不了作用——你把导航、菜单图标都嵌套在了<h2>内部，导致.header的flex布局逻辑失效。

修复步骤 #

1. 调整HTML结构，将导航和菜单图标从<h2>中移出，让.header下有两个独立的直接子元素：标题区（<h2 class="header-title">）和导航控制区（包含导航栏与菜单图标）。
2. 微调CSS，确保子元素的对齐方式符合视觉需求。

修改后的代码 #

HTML

<header class="header">
  <h2 class="header-title">
    <span>Matt Ridd</span>
    <i class="fa fa-lg fa-paper-plane plane-ico"></i>
  </h2>
  <div class="header-controls">
    <nav id="header-navigation" class="header-navigation">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Books</a>
      <a href="#">Blog</a>
      <a href="#">Home</a>
    </nav>
    <i onclick="toggleMenu('block')" class="fa fa-bars menu-ico"></i>
    <i onclick="toggleMenu('none')" id="close-ico" class="fa fa-times-circle close-ico"></i>
  </div>
</header>

CSS

:root {
  --primary-color: #013456;
  --accent-color: #fad405;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 新增：让两个子元素垂直居中对齐 */
  padding-top: 81px;
  max-width: 1231px;
  margin: 0 auto;
  font-family: "Istok Web";
}
.header span {
  font-weight: 700;
  font-size: 40px;
  margin-right: 10px;
  color: var(--primary-color);
}

.header-title {
  margin: 0;
  display: flex;
  align-items: center;
}

.header .plane-ico {
  color: var(--accent-color);
}

.header-controls {
  display: flex;
  align-items: center; /* 让导航和菜单图标垂直居中 */
}

.header-navigation {
  display: flex;
  align-items: center;
  height: 52px;
  margin-right: 5px;
}

.header-navigation a {
  text-emphasis: none;
  margin-left: 29px;
  color: var(--primary-color);
  font-size: 36px;
  font-weight: 500;
  text-decoration: none;
}

.header .menu-ico,
.header .close-ico {
  display: none;
}

.header .close-ico {
  color: var(--accent-color);
}

额外说明 #

• 新增.header-controls容器包裹导航和菜单图标，确保它们作为一个整体，和标题区形成两端对齐的布局。
• 给.header添加align-items: center，让两个子元素在垂直方向上居中对齐，视觉效果更协调。
• 移除了.header的text-align: right，flex布局已能精准控制元素位置，该属性不再需要。

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