为何设置display:flex后justify-content:space-between仍不生效？

核心问题 #

justify-content: space-between的生效前提是flex容器内存在至少两个子元素——它的作用是在子元素之间均匀分配容器剩余空间，让首尾元素分别贴紧容器的起始端和结束端。你的.navbar里只有.burger这一个子元素，没有其他元素来形成“间距”，所以这个属性完全起不到你想要的效果。

另外你代码里的align-content: center是错误的：这个属性用于多行flex容器的垂直对齐，单行容器需要用align-items: center来让子元素垂直居中。

具体解决方案 #

根据你的需求不同，有几种处理方式：

1. 原本需要多个导航元素（比如左侧logo+右侧汉堡）

直接在.navbar内添加另一个子元素，space-between就会自动让两个元素分别贴紧左右两侧：

修改后的HTML：

<nav class="navbar">
    <div class="logo">站点LOGO</div>
    <div class="burger">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
    </div>
</nav>

保留原有CSS（记得把align-content改成align-items）：

.navbar {
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center; /* 修正为align-items */
    height: 10vh;
    background-color: blue;
}

2. 目前只有汉堡元素，想让它固定在某一侧

直接修改justify-content的值，不需要space-between：

.navbar {
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end; /* 让汉堡靠右 */
    /* 可选：justify-content: flex-start 靠左，justify-content: center 居中 */
    align-items: center;
    height: 10vh;
    background-color: blue;
}

3. 想让汉堡和容器边缘保持间距

给.navbar添加内边距，或者给.burger添加外边距：

/* 方式1：给容器加内边距 */
.navbar {
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 10vh;
    background-color: blue;
    padding: 0 20px; /* 左右各20px间距 */
}

/* 方式2：给汉堡加外边距 */
.navbar .burger {
    margin-right: 20px; /* 右侧留20px间距 */
}

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