用flex实现响应式按钮排列最稳方案是移动端优先设flex-direction: column，PC端用min-width媒体查询切为row，配合gap控制间距、width: 100%适配竖排，避免float/inline-block及IE兼容问题。
用 flex 实现响应式按钮排列
直接用 display: flex + flex-direction 配合媒体查询最稳，不用 JS、不依赖框架，现代浏览器全支持。
关键不是“怎么排”，而是“断点设在哪”和“方向切得是否干净”。移动端竖排是默认流，但硬写 flex-direction: column 在 PC 上反而容易漏掉重置，导致横竖错乱。
- 移动端优先：根容器默认设
flex-direction: column - PC 断点里用
@media (min-width: 768px)覆盖为row（别用max-width，避免小屏设备误触发） - 按钮加
width: 100%在竖排时撑满，横排时自动收缩——不加的话，竖排可能窄得看不见文字
为什么不能只靠 float 或 inline-block
float 在移动端需要额外清除浮动，且 vertical-align 对齐不可靠；inline-block 有 4px 间隙问题，缩放或字体变化时容易错位。两者在 flex 布局普及后已无必要。
更隐蔽的坑是：某些 UI 框架（比如老版 Bootstrap）会给按钮加 display: inline-block，如果没重置，和 flex 混用会导致高度不一致甚至换行异常。
立即学习“前端免费学习笔记（深入）”；
- 务必在按钮上显式写
display: block或留空让 flex 子项自然表现 - 避免对按钮设
margin-right控制横排间距——横排时用gap，竖排时也生效，更统一
gap 替代 margin 的实际效果
gap 是 flex 和 grid 的原生间距控制，比手动给每个按钮加 margin-bottom 或 margin-right 更安全：它不会影响首尾元素，也不触发外边距合并（margin collapse）。
在移动端竖排时，gap: 8px 就是按钮间的垂直空隙；到 PC 横排，它自动变成水平空隙，无需重复写媒体查询。
- IE 不支持
gap（哪怕 flex-gap），如需兼容 IE11，退回用margin+:not(:last-child) - 不要写成
gap: 8px 0再在媒体查询里改——gap单值足够，方向由flex-direction决定
一个最小可用代码片段
```css
.btn-group {
display: flex;
flex-direction: column;
gap: 8px;
}
@media (min-width: 768px) {
.btn-group {
flex-direction: row;
}
}
.btn-group > button {
width: 100%;
}
```注意：.btn-group > button 的 width: 100% 在横排时会让按钮强行占满整行——所以实际中建议改成 flex: 1 或固定宽度（如 width: auto），否则 PC 上三个按钮会挤成一行但超宽溢出。
真正难的不是写对这十几行，而是检查按钮有没有被父级其他样式（比如 text-align: center 或 max-width）悄悄干扰了 flex 行为。
