“均匀分布”需据场景选方案：两端对齐用justify-content: space-between（需≥2子元素、无干扰边距、按钮宽相近）；等宽填满用flex: 1（禁设width/max-width，配gap更佳）；垂直分布需容器设明确高度或改用gap。
按钮组“均匀分布”不等于“等宽”，得先明确你要的是两端对齐、中间等距（justify-content: space-between），还是所有按钮宽度一致且填满容器（flex: 1），或是垂直方向上等距排列。选错方案，调半天也白搭。
用 justify-content: space-between 实现两端对齐
这个属性只在**至少两个子元素**且**无干扰边距**时才真正均匀。它把首尾按钮顶到容器边缘，中间空隙均分——但视觉是否“匀”，取决于按钮自身宽度是否接近。
- 必须确保父容器没有
padding-left/padding-right，否则首尾按钮会缩进 - 所有按钮要重置默认外边距：
button { margin: 0; } - 如果按钮文字长度差异大（比如“确定” vs “导出全部用户数据并发送邮件”），建议统一设
min-width或flex: 0 0 120px，避免拉伸变形 - 别和
gap混用——space-between管的是“剩余空间分配”，gap是固定间隔，两者逻辑冲突
用 flex: 1 实现按钮等宽填满
这是让一组按钮“均分父容器宽度”的最稳解法，不依赖按钮内容长度，也不要求容器有固定高度。
- 父容器设
display: flex，按钮设flex: 1，即可自动等宽 - 配合
gap: 8px控制间距，比用margin更干净，不会影响 flex 计算 - 避免给按钮写
width或max-width，否则会破坏flex: 1的伸缩行为 - 小屏幕下可能溢出？加
flex-wrap: wrap并设min-width: 0防止文字撑开
垂直菜单里按钮上下均匀分布
垂直场景下，justify-content: space-between 必须搭配 flex-direction: column 和**明确的容器高度**，否则无效。
- 容器必须设
height或min-height（例如min-height: 300px），不然 Flex 认为“没空间可分” - 若按钮数量不确定或常增删，改用
gap: 1.2rem更可靠——它不依赖总高度，只控制相邻项间距 -
space-around在垂直方向会让首尾留白是中间的一半；要完全等距，用space-evenly（Chrome 63+/Firefox 52+ 支持） - 别在容器上同时设
padding和space-between，padding 会压缩可用空间，导致间距变小且难预测
真正容易被忽略的，不是属性怎么写，而是“谁在控制空间”：是容器高度、按钮自身宽度、还是 gap 值？三者一动，布局就偏。动手前先用开发者工具高亮盒模型，看清 padding/margin/flex 剩余空间在哪，比盲目调属性快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
