多按钮排列混乱？用flexbox轻松控制间距

• 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 —— 水平+垂直间隙都是 8px
• row-gap: 4px; column-gap: 12px —— 分别控制行/列间距
• 注意：gap 在 Flexbox 中兼容性良好（Chrome 84+/Firefox 63+/Safari 14.1+）

必要时用 align-items 垂直对齐

如果按钮文字大小不一、图标高度不同，容易上下参差：

• align-items: center —— 让所有按钮在交叉轴（垂直方向）居中对齐
• align-items: stretch（默认）—— 按钮会拉满容器高度，慎用

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。