CSS样式justify-content: space-between；详细解读

含义：当使用 justify-content: space-between; 时，弹性容器中的项目会沿着主轴分布，第一个项目会靠向主轴起点，最后一个项目会靠向主轴终点，而项目之间的间隔会平均分配剩余的空间。
效果示例：
- 假设我们有一个弹性容器，里面有三个子项目，容器的宽度为 300px，每个子项目的宽度为 80px。
- 当设置 justify-content: space-between; 且 flex-direction 为 row（水平方向）时，第一个子项目会紧贴容器的左侧（主轴起点），第三个子项目会紧贴容器的右侧（主轴终点），中间的剩余空间（300 - 80 * 3 = 60px）会平均分配在第一个和第二个子项目之间以及第二个和第三个子项目之间，即每个间隔为 30px。
- 如果 flex-direction 为 column（垂直方向），则第一个子项目会紧贴容器的顶部（主轴起点），第三个子项目会紧贴容器的底部（主轴终点），中间的剩余空间会平均分配在第一个和第二个子项目之间以及第二个和第三个子项目之间。
使用场景
导航栏布局：在水平导航栏中，可以使用弹性布局和 justify-content: space-between; 来让导航项均匀分布在导航栏的两端，例如将品牌标志放在左侧，导航链接放在右侧，并且它们之间的间隔均匀。

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

卡片式布局：当展示多个卡片（如产品卡片、新闻卡片等）时，使用弹性布局并设置 justify-content: space-between; 可以让卡片在容器中均匀分布，使布局更加美观和整洁。

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

表单布局：在表单中，如果有多个输入框或表单元素，可以使用弹性布局和 justify-content: space-between; 来排列这些元素，使表单元素之间的间隔均匀，提高表单的可读性和美观度。
总之，justify-content: space-between; 是弹性布局中一个非常实用的属性值，它可以帮助我们轻松实现项目在主轴上的均匀分布和对齐，适用于多种布局场景，能够提升网页的布局效果和用户体验。