React中CSS的justify-content: space-between不生效问题求助

问题 #

在React项目中，为类名为.navbarlist的<ul>标签设置justify-content: space-between，期望列表项能均匀分布，但该属性未生效。相关代码如下：

JSX代码 #

<div>
  <div className="picbot">PicBot</div>

  <ul className="navbarlist">
    <li>Overview</li>
    <li>Examples</li>
    <li>Tour</li>
    <li>Blog</li>
    <li>Help</li>
  </ul>
            
  <button className="download">Download</button>
</div>

CSS代码 #

.navbarlist {
  list-style: none;
  display: inline-flex;
  flex-direction: row;
  color: rgb(192, 190, 190);
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}

解决方法 #

• 核心原因：display: inline-flex会让容器宽度仅由内部内容撑开，justify-content: space-between需要容器有额外剩余空间才能分配间距，此时没有多余空间，所以属性不生效。
• 修改方案：
  1. 直接将display: inline-flex改为display: flex，容器默认会占满父元素宽度（前提是父元素有足够宽度），此时justify-content: space-between就能正常生效。
  2. 如果需要保留行内元素特性，同时给容器设置足够宽度，比如width: 100%或者固定宽度width: 600px，配合display: inline-flex使用。

修改后的CSS示例（方案1）：

.navbarlist {
  list-style: none;
  display: flex;
  flex-direction: row;
  color: rgb(192, 190, 190);
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}

修改后的CSS示例（方案2）：

.navbarlist {
  list-style: none;
  display: inline-flex;
  width: 100%;
  flex-direction: row;
  color: rgb(192, 190, 190);
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}

另外注意：原JSX代码中<li>Overview</li>后的your text是冗余内容，建议删除以避免渲染错误。

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