ReactJS中flexbox的justify-content均匀间距设置不生效问题

问题原因 #

justify-content属性生效的前提是flex父容器存在可分配的剩余水平空间，当前配置未生效主要有两点问题：

1. 外层.mainContent下的.content容器没有设置占满侧边栏之外的剩余宽度，默认仅刚好包裹内部内容，没有足够的横向空间
2. .userStats-container本身未设置宽度为100%，宽度仅刚好等于三个子元素的宽度之和，没有剩余空间可供间距分配

解决方案 #

按以下步骤修改CSS即可：

1. 先新增全局盒模型重置，避免padding撑大容器宽度，统一不同浏览器的默认样式
2. 给右侧内容容器.content添加flex: 1属性，占满侧边栏之外的所有可用宽度
3. 给.userStats-container添加100%宽度和对应的左右内边距，再按需调整justify-content属性即可

修改后的CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins';
    font-weight: normal;
    overflow-x: hidden;
    -ms-overflow-style: none;
    scrollbar-width: 0.1em;
}


*::-webkit-scrollbar {
    display: none;
}

.mainContent {
    display: flex;
    flex-direction: row;
}

/* 新增右侧内容容器样式 */
.content {
    flex: 1;
}

.cardLinks {
    display: inline-flex;
    gap: 120px;
    margin-left: 2em;
    margin-top: 2em;
}

.userStats-container {
    display: flex;
    flex-direction: row;
    /* 需要子元素贴左右边缘就用space-between，需要左右也留均等间距就保留space-around */
    justify-content: space-between; 
    width: 100%;
    padding: 0 2em;
    margin-top: 80px;
}

如果想要固定三个子元素之间的间距，不需要自适应分配，也可以直接给.userStats-container添加gap: 2rem属性，调整数值到需要的间距即可。

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