父元素设justify-content:center时，子元素space-between失效问题

核心问题是**justify-content仅在Flex布局容器中生效**，你给包含h2的div添加了justify-content: space-between，但没有将这个div设置为Flex容器，所以属性不会起作用。

修改方案 #

给包含h2的div添加display: flex，同时设置合适的宽度（确保容器有足够空间让子元素均匀分布）：

修改后的HTML代码

<div class="navbar">
  <h1>test</h1>
  <!-- 添加display:flex和width，让h2横向均匀分布 -->
  <div style="display: flex; justify-content: space-between; width: 100%; max-width: 800px;">
    <h2>test</h2>
    <h2>test</h2>
    <h2>test</h2>
  </div>
</div>

优化后的CSS代码（可选，清除默认样式干扰）

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: #003959;
  color: white;
  /* 若希望h1和h2容器垂直排列，保留flex-direction: column；若要横向排则改为row */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 清除h2默认margin，避免额外间距影响布局 */
.navbar h2 {
  margin: 0;
}

说明 #

1. display: flex：将容器转为Flex布局，激活justify-content等Flex属性
2. justify-content: space-between：让子元素（h2）在容器内两端对齐，中间自动分配均匀间距
3. width: 100%：让容器占满父元素的可用宽度，确保间距足够明显；max-width用于限制容器最大宽度，避免在超大屏幕上间距过大
4. 清除h2默认margin：浏览器对h2有默认上下margin，会导致布局间距不符合预期，建议统一清除

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