使用 flex-wrap 和 gap 可创建响应式按钮组：通过 display: flex、flex-wrap: wrap 实现换行，gap 统一间距，无需媒体查询即可在不同屏幕下自动调整布局。
在CSS中制作响应式按钮组，可以利用 flex-wrap: wrap 和 gap 属性，让按钮在不同屏幕尺寸下自动换行并保持一致的间距。这种方式简洁高效，无需媒体查询也能实现良好的布局适应性。
使用 Flex 布局启用换行（flex-wrap）
将容器设置为 flex 布局，并启用换行，可以让按钮在空间不足时自动折行显示。
说明：- 给父容器设置 display: flex 启用弹性布局。
- 添加 flex-wrap: wrap 允许子元素在容器宽度不够时换行。
- 这样按钮组在小屏幕上会自动堆叠成多行，避免溢出或挤压。
使用 gap 属性统一间距
gap 属性用于设置子元素之间的间距，适用于 flex、grid 等布局。它比 margin 更干净，不会产生外边距重叠或首尾多余空白的问题。
建议写法：- 在容器上设置 gap: 10px 或 gap: 0.5rem，统一控制按钮之间的横向和纵向间距。
- 结合 flex-wrap 使用时，gap 在换行后依然能保持整齐的网格状排列。
- 无需为每个按钮单独设置 margin，减少样式冲突。
完整示例代码
以下是一个实用的响应式按钮组实现方式：
立即学习“前端免费学习笔记（深入）”；
<div class="button-group"> <button>按钮 1</button> <button>按钮 2</button> <button>按钮 3</button> <button>按钮 4</button> <button>按钮 5</button> </div>
这个结构在手机上会自动排成一列或多列，在桌面端则横向展开，视觉效果始终整齐。
基本上就这些。flex-wrap 和 gap 配合使用，让响应式按钮组变得简单又可靠。不复杂但容易忽略。
