最常见的原因是父容器未设display: flex或宽度不明确；space-between只分配剩余空间给项目间间隙，若容器width为auto则无空间可分，按钮全挤左侧。
justify-content: space-between 为什么没生效
最常见的原因是父容器没设 display: flex，或者设了但宽度不明确。space-between 不是“让按钮等宽”，而是把**剩余空间均分给项目之间的间隙**——如果父容器 width 是 auto（比如未设宽的 div 或 inline-flex），它根本没“剩余空间”可分，按钮就全挤在左边。
实操建议：
- 给父容器显式加
width: 100%或具体值（如width: 600px） - 确认没意外设置
flex-direction: column——此时 space-between 控制的是上下间距 - 用开发者工具检查 computed 样式里的
width和display，别信“看起来像 flex” - 确保子元素 ≥ 2 个；只有 1 个按钮时，它会直接靠左，和
flex-start效果一样
gap 比 margin 更可靠地控制按钮间距
手动给每个按钮加 margin-right 再用 :last-child 清除，容易在动态增删、换行、响应式时出错。而 gap 是专为 flex/grid 子项间空隙设计的，不干扰首尾外边距，也不参与盒模型计算。
实操建议：
- 父容器上直接写
gap: 8px，所有相邻按钮间自动等距 - 需要兼容 IE？降级方案：
button + button { margin-left: 8px; }，再用gap覆盖 - 换行后仍要行列等距？
gap天然支持，margin完全失控 - Safari 14.0 支持
gap但不支持百分比值，别写gap: 5%
按钮宽度不一致导致视觉“不匀”怎么办
space-between 只管间隙，不管按钮自身宽窄。文字长短不同、带图标、或用了不同 padding，会让按钮实际宽度差异大，即使间隙相等，看着也“不均匀”。
实操建议：
- 统一宽度：给按钮加
flex: 0 0 120px或min-width: 100px - 等比例伸缩：用
flex: 1让所有按钮平分父容器宽度（适合成对按钮如“确定/取消”） - 避免混用：别一个按钮设固定宽，另一个留内容自适应
- 重置默认边距：
button { margin: 0; }，防止浏览器默认样式干扰
多行按钮怎么保持每行都均匀分布
justify-content: space-between 在 flex-wrap: wrap 下只对第一行生效，第二行及以后默认左对齐——这不是 bug，是规范行为。想让每行都“首尾撑开+中间等距”，gap 是唯一靠谱的纯 CSS 解法。
实操建议：
- 父容器设
display: flex; flex-wrap: wrap; gap: 12px; - 别依赖
space-between+ 伪元素模拟多行均分——只适用于子项数量固定场景 - 若必须用
space-between且只有两行，可考虑用::after { content: ""; flex: 1; }占位，但维护成本高 - 极端情况（如需精确控制每行按钮数+高度一致），改用
display: grid更稳
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
