Flex布局下导航栏列表项justify-content不生效问题求助

问题根源 #

你给.nav--list设置了justify-content: space-between却没效果，核心原因是这个flex容器没有足够的可用宽度——flex容器默认是收缩包裹内容的，也就是它的宽度刚好只够装下所有列表项，没有多余空间让space-between分配间距，所以列表项自然挤在一起。

两种修复方案 #

方案1：给列表容器分配足够宽度

让.nav--list占满父元素的可用宽度，这样space-between就能把剩余空间均匀分配到列表项之间：

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;
    align-items: center; /* 让导航栏元素垂直居中，优化视觉效果 */
    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
    padding: 0 1rem; /* 可选：加左右内边距避免元素贴边 */
}
.nav{
    width: 100%; /* 让nav占满nav-wrapper的中间可用空间 */
    max-width: 600px; /* 可选：限制最大宽度，避免屏幕过宽时间距过大 */
}
.nav--list{
    display: flex;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%; /* 让列表占满nav的宽度 */
}

方案2：直接给列表项加间距（更灵活可控）

如果不需要列表项撑满容器，只是要固定间距，用gap直接设置列表项间距更简单：

.nav-wrapper{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: rgba(245, 253, 255, 0.8);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(14px);
}
.nav--list{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 2rem; /* 直接设置列表项之间的间距 */
    /* 也可以用margin实现：.nav--list-item + .nav--list-item { margin-left: 2rem; } */
}

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