justify-content: space-between 可使Flexbox容器内子元素首尾对齐边界、中间等距分布，适用于导航栏或卡片布局；需确保容器有足够空间，且子元素不设100%宽度，避免间隔失效；通常与gap属性互斥使用。
在CSS中使用Flexbox布局时，justify-content: space-between 是一种非常实用的对齐方式，特别适合让容器内的子元素之间保持均匀间隔。它能自动分配主轴（通常是水平方向）上的空白空间，使第一个子元素靠前、最后一个靠后，中间的元素等距分布。
justify-content 与 space-between 的作用
justify-content 控制的是flex容器中子元素在主轴方向上的对齐方式。space-between 是其常用值之一，含义是：
- 第一个子元素贴住容器起点
- 最后一个子元素贴住容器终点
- 其余子元素之间的间距相等
这个特性非常适合用于导航栏、按钮组或卡片列表的布局，无需手动设置 margin 就能实现自然的间隔效果。
基本使用示例
HTML 结构：<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
CSS 样式：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
justify-content: space-between;
}
<p>.item {
/<em> 可选：设置固定宽度以便看到间隔效果 </em>/
width: 80px;
background: #007acc;
color: white;
text-align: center;
padding: 10px 0;
}</p>结果是四个项目均匀分布在容器中，首尾紧贴边缘，中间三段空白相等。
常见注意事项
使用 space-between 时需注意以下几点：
- 容器必须有足够的空间容纳所有子元素，否则可能看起来像挤在一起
- 如果只有一个子元素，
space-between不会产生任何间隔效果 - 子元素不应设置占满主轴的宽度（如 width: 100%），否则会破坏间隔逻辑
- 若希望首尾也有外边距，可考虑用
space-around或gap属性代替
配合 gap 属性增强控制
CSS新增的 gap 属性可用于flex布局中，提供更灵活的间隔控制：
.container {
display: flex;
justify-content: space-between;
gap: 20px; /* 设置最小间隔，与 space-between 同时使用要小心 */
}
注意：gap 和 space-between 一起使用可能导致双重重叠，通常选择其一即可。若使用 gap，建议将 justify-content 设为 flex-start 或 center 配合使用。
基本上就这些。掌握 justify-content: space-between 能让你快速实现美观的等距布局，是现代前端开发中的基础技巧之一。
