用Flexbox控制按钮排列需将父容器设为display: flex,再通过justify-content调节水平分布、gap设置间隙、align-items实现垂直居中对齐。

用 Flexbox 控制按钮排列,能快速解决多按钮错位、间距不均、换行异常等问题。关键是把容器设为 display: flex,再配合几个核心属性统一管理对齐和间隔。
给按钮容器加 display: flex
不要直接在按钮上写样式,而是选中它们的父容器(比如 控制按钮在主轴(默认是水平方向)上的分布方式: 比起老方法(给每个按钮加 立即学习“前端免费学习笔记(深入)”; 如果按钮文字大小不一、图标高度不同,容易上下参差:
display: flex —— 启用弹性布局
flex-wrap: wrap(可选)—— 允许按钮自动换行,避免溢出用 justify-content 统一水平间距
justify-content: space-between —— 首尾贴边,中间等距(适合2个以上按钮)justify-content: space-around —— 每个按钮左右留相同空白(视觉更均衡)justify-content: center —— 所有按钮居中排成一行用 gap 属性一键设置按钮间隙
margin-right 再单独处理最后一个),gap 更干净:
gap: 8px —— 水平+垂直间隙都是 8pxrow-gap: 4px; column-gap: 12px —— 分别控制行/列间距gap 在 Flexbox 中兼容性良好(Chrome 84+/Firefox 63+/Safari 14.1+)必要时用 align-items 垂直对齐
align-items: center —— 让所有按钮在交叉轴(垂直方向)居中对齐align-items: stretch(默认)—— 按钮会拉满容器高度,慎用










