默认竖排、中大屏横排最稳妥：button-group设flex-direction: column，@media (min-width: 768px)切row并加flex-wrap: wrap；按钮需max-width: 100%、box-sizing: border-box及white-space: nowrap防错位。
按钮横向排列在桌面端、纵向堆叠在移动端怎么写
直接用 flex-direction 配合媒体查询最稳妥，不依赖 JS，语义清晰，浏览器兼容性好（Chrome 21+、Firefox 20+、Safari 6.1+ 都支持）。关键不是“怎么排”，而是“什么时候切方向”——断点选错，小屏上按钮挤成一行溢出，大屏上又傻乎乎竖着排。
- 默认设为
flex-direction: column（竖排），再在中大屏用@media (min-width: 768px)切成row；这样移动优先，避免小屏加载完再重排 - 别用
max-width: 767px反向写，容易漏掉 768px 这个临界宽度，导致部分平板横屏时样式错乱 - 加
flex-wrap: wrap防止按钮过多时单行撑爆容器（尤其在 iPad 横屏等中间尺寸）
button-group {
display: flex;
flex-direction: column; /* 移动端默认竖排 */
gap: 8px;
}
<p>@media (min-width: 768px) {
button-group {
flex-direction: row; /<em> 桌面端切横排 </em>/
flex-wrap: wrap;
}
}按钮数量动态变化时，如何避免 flex 换行错位
当按钮是 JS 动态插入或通过 v-for/*ngFor 渲染时，flex-wrap 在窄屏下可能把两个按钮挤在一“行”，第三个掉到下一行，视觉上不对齐。这不是 bug，是 flex 默认按内容宽度换行，而按钮宽度没约束。
- 给按钮统一设
flex: 1 1 auto或flex: 0 0 auto，避免拉伸变形 - 更可靠的是限制最大宽度：
max-width: 100%+box-sizing: border-box，确保按钮不会撑破父容器 - 如果按钮文字长度差异大，加
white-space: nowrap防止文字折行导致高度不一致
用 grid 替代 flex 实现方向切换是否更简单
Grid 能用 grid-template-rows 和 grid-template-columns 显式控制流向，但“方向切换”这件事上并不比 flex 简洁——你仍得靠媒体查询改模板定义，反而多一层抽象。
- Grid 适合固定数量、需精确行列对齐的场景（比如 3×2 按钮矩阵），不是为“横/竖二选一”设计的
- Flex 的
flex-direction是专为此类流式方向切换优化的属性，语义和性能都更直接 - 若强行用 Grid，要写两套
grid-template-areas，维护成本高，且 Safari 旧版本对grid-template-areas响应式支持不稳定
按钮间距在方向切换时如何保持视觉一致性
横向时用 gap: 12px 是水平间距，竖向时它变成垂直间距——这本来就是预期行为。但容易被忽略的是：当按钮有 border-radius 或 outline 时，gap 不包含这些视觉边缘，导致视觉间距不统一。
立即学习“前端免费学习笔记（深入）”；
- 始终用
gap控制间距，不要混用margin，否则方向切换后 margin 可能叠加或失效 - 如果按钮带外阴影（
box-shadow），注意gap不会避开阴影，必要时用padding在父容器内预留空间 - 在 Safari 中，
gap对inline-flex支持不全，务必用display: flex
实际最难处理的，是按钮内部文字换行与外部布局方向切换的耦合——比如横排时文字强制单行，竖排时允许折行，这种细节必须用 white-space 和 min-width 协同控制，光靠 flex-direction 解决不了。
