• 假设我们有一个弹性容器，里面有三个子项目，容器的宽度为 300px，每个子项目的宽度为 80px。
• 当设置 justify-content: space-between; 且 flex-direction 为 row（水平方向）时，第一个子项目会紧贴容器的左侧（主轴起点），第三个子项目会紧贴容器的右侧（主轴终点），中间的剩余空间（300 - 80 * 3 = 60px）会平均分配在第一个和第二个子项目之间以及第二个和第三个子项目之间，即每个间隔为 30px。
• 如果 flex-direction 为 column（垂直方向），则第一个子项目会紧贴容器的顶部（主轴起点），第三个子项目会紧贴容器的底部（主轴终点），中间的剩余空间会平均分配在第一个和第二个子项目之间以及第二个和第三个子项目之间。

使用场景

.nav-container {
    display: flex;
    justify-content: space-between;
}
.nav-logo {
    /* 品牌标志样式 */
}
.nav-links {
    /* 导航链接样式 */
}

.card-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.card {
    /* 卡片样式 */
    width: 200px;
    margin-bottom: 20px;
}

总之，justify-content: space-between; 是弹性布局中一个非常实用的属性值，它可以帮助我们轻松实现项目在主轴上的均匀分布和对齐，适用于多种布局场景，能够提升网页的布局效果和用户体验。