justify-content: space-between 实现按钮两端对齐需满足至少两个子元素且无边距/填充干扰；按钮宽度不一致或父容器有padding、子元素有margin会导致间距不均；推荐统一宽度、重置margin、使用gap或flex-wrap适配响应式。
使用 justify-content: space-between 确实能让按钮组两端对齐、中间均匀拉开，但**它只在容器内有“至少两个子元素”且“没有额外的边距或填充干扰”时才表现理想**。如果出现间距不均，通常不是属性本身的问题，而是布局细节没处理好。
检查按钮是否真的“等宽”或“自然宽度一致”
space-between 是把剩余空间平均分给“相邻项目之间的间隙”，也就是说：第一个按钮紧贴左边缘，最后一个紧贴右边缘，中间所有间隙相等。但如果按钮宽度差异大（比如一个文字“确定”，一个“取消并导出全部数据”），视觉上就会觉得间隔不匀。
- 建议统一按钮宽度：
flex: 0 0 120px或min-width: 100px - 或者让所有按钮“等比例伸缩”：
flex: 1（配合flex-wrap: nowrap） - 避免混用固定宽 + 内容自适应宽的按钮
确认父容器没有 padding 或子元素有 margin 干扰
外层容器若有左右 padding，或某个按钮自己加了 margin-left/right，都会破坏 space-between 的计算基准。
- 重置按钮默认外边距：
button { margin: 0; } - 检查父容器：
padding-left/padding-right是否为 0，或改用padding-inline: 0 - 用浏览器开发者工具高亮盒模型，一眼看出是否有隐藏偏移
考虑用 gap 替代 margin + justify-content
CSS Grid 和现代 Flex 已支持 gap 属性（Flex 中需确保父元素是 display: flex 且浏览器兼容性 OK，Chrome 84+/Firefox 63+ 支持）。
立即学习“前端免费学习笔记（深入）”；
- 直接写：
display: flex; gap: 12px; justify-content: center; -
gap控制的是“项目之间”的间隙，不牵扯首尾对齐逻辑，更可控、更直观 - 无需担心第一个/最后一个按钮贴边问题，所有间隔真正一致
小屏幕下 space-between 容易挤出横向滚动条
当按钮总宽度 + 间隙 > 容器宽度时，space-between 不会自动换行，可能溢出。
- 加上
flex-wrap: wrap并配合justify-content: center更稳妥 - 或用媒体查询在小屏切为垂直堆叠：
flex-direction: column - 按钮内文字用
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防止撑开
基本上就这些。space-between 不是万能钥匙，但它很干净——前提是结构干净、尺寸可控、干扰清零。
