必须给父容器设置 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 场景下的“视觉均匀”。更稳妥的做法是让每个按钮成为等宽弹性项：
