必须给父容器设置 display: flex，justify-content: space-between 才生效；它将可用空间均分给项目间间隙，而非每个项目；实现视觉均匀推荐 flex: 1 或 space-evenly（兼容性需注意）。
按钮组用 justify-content: space-between 却没均匀分布？先看父容器是否设了 display: flex
这是最常被忽略的一步：justify-content 只在 flex 容器上生效。如果父元素只是普通 div，加了 space-between 也完全没反应。
- 必须给父容器显式设置
display: flex - 如果父容器有固定宽度或受内容挤压（比如被
float或position: absolute干扰），flex 行为可能异常 - 检查是否意外设置了
flex-direction: column—— 此时justify-content控制的是垂直方向，不是水平间距
为什么两端按钮紧贴边缘，中间空隙太大？space-between 的行为本质
space-between 把可用空间「均分」给「项目之间的间隙」，而不是给每个项目分配等宽区域。它会在第一个项目前、最后一个项目后不放空隙，只在项目之间插入等量空白。
- 3 个按钮 → 产生 2 个间隙 → 总空隙均分给这 2 处
- 如果按钮本身宽度不一致（比如文字长度不同 + 未设
flex: 1），视觉上会显得“不匀” - 想让每个按钮占相同宽度并居中对齐，更适合用
justify-content: space-around或flex: 1配合text-align: center
真正实现“均匀分布”的常用组合写法
仅靠 justify-content 很难满足多数 UI 场景下的“视觉均匀”。更稳妥的做法是让每个按钮成为等宽弹性项：
.btn-group {
display: flex;
}
.btn-group > button {
flex: 1;
margin: 0 4px; /* 可选：避免紧贴 */
}
/* 如果需要间隔一致且两端留白，改用 space-evenly（注意兼容性） */
.btn-group {
display: flex;
justify-content: space-evenly;
}-
flex: 1让所有按钮平分父容器剩余宽度，比纯space-between更可控 -
justify-content: space-evenly在支持它的浏览器（Chrome 87+、Firefox 72+、Safari 14.1+）中，会在首尾也留出间隙，效果更接近“均匀” - IE11 不支持
space-evenly，需降级为space-between+ 伪元素 hack 或 JS 补齐
移动端或响应式下按钮换行导致错位？别忘了 flex-wrap
当按钮数量多或父容器变窄，flex 默认不换行，可能造成溢出或压缩变形。此时 justify-content 失效。
立即学习“前端免费学习笔记（深入）”；
- 加
flex-wrap: wrap允许换行，但space-between在多行时只对当前行生效，无法跨行对齐 - 如需多行也均匀，得配合
display: grid或 JS 动态计算（CSS 目前无原生多行 space-evenly） - 简单方案：限制最小按钮宽度 +
min-width+flex-wrap: wrap，再用媒体查询调整列数
实际布局中，“均匀分布”到底指什么，往往取决于设计稿里按钮是否有固定宽、是否允许换行、是否要兼容老浏览器——这些细节不明确时，光套一个 justify-content: space-between 很容易返工。
