按钮组默认是水平排列；多数CSS框架如Bootstrap、Tailwind、Bulma通过flex-direction: row实现，需显式设置flex-col或column才垂直，且垂直时须处理宽度、gap兼容性与可访问性。
按钮组默认是水平排列还是垂直排列？
大多数 CSS 框架（如 Bootstrap、Tailwind、Bulma）的按钮组（.btn-group 或 .flex 容器）默认采用水平排列，依赖 display: flex + flex-direction: row。这不是“固定规则”，而是框架作者对常见表单场景的预设——但你不能假设所有框架都一致，尤其当使用自定义类或低版本时。
- Bootstrap 5 的
.btn-group内部用flex-direction: row，子按钮.btn默认不换行 - Tailwind 的
flex默认也是flex-row，需显式加flex-col才垂直 - 若按钮被包裹在未设方向的
div class="flex"中，实际表现取决于浏览器默认（即row）
用 flex 工具类强制水平排列（row）的可靠写法
水平排列看似简单，但容易因 margin、white-space 或 inline 元素残留导致错位。关键不是“能不能排”，而是“排得齐不齐、间距控不控得住”。
- 优先用框架原生组合：如 Bootstrap 的
.btn-group+.btn-group-horizontal（部分版本），或 Tailwind 的flex flex-row gap-2 - 避免混用
inline-block和flex：若父容器已设flex，子按钮再设display: inline-block会破坏对齐 - 统一控制间距用
gap（现代浏览器支持好），比手动给每个按钮加margin-right更健壮 - 防止换行：加
flex-nowrap（Tailwind）或flex-wrap: nowrap（原生）
.btn-group-horizontal {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.5rem;
}
切换为垂直排列（col）时必须处理的三个细节
垂直按钮组常用于侧边操作栏或移动端菜单，但直接改 flex-direction: column 很容易出问题——宽度塌陷、点击热区变小、键盘导航顺序错乱。
- 宽度需显式设置：垂直时按钮默认撑满父容器宽，若父容器无宽限制，可能过宽；建议加
min-width: fit-content或固定width - 禁用
gap的意外行为：某些旧版 Safari 对flex-direction: column+gap支持不稳定，可降级用margin-bottom - 确保可访问性：垂直排列时，
tabindex顺序应与视觉顺序一致，避免用order随意调序
.btn-group-vertical {
display: flex;
flex-direction: column;
width: fit-content;
}
.btn-group-vertical .btn {
margin-bottom: 0.25rem;
}
.btn-group-vertical .btn:last-child {
margin-bottom: 0;
}
响应式切换方向：何时该用 @media，何时该用框架断点？
在移动端竖屏下垂直堆叠按钮、桌面端水平排列，是典型响应式需求。但别急着写 @media (max-width: 768px) ——多数框架已提供语义化断点工具类，更轻量且易维护。
立即学习“前端免费学习笔记（深入）”；
- Tailwind 推荐：
flex flex-col md:flex-row md:gap-3—— 移动端列排，中屏起恢复行排+间距 - Bootstrap 5 可用
flex-column flex-md-row，配合gap-md-2类 - 自己写媒体查询时，注意断点值必须和框架一致，否则出现“在 iPad 上既不是手机也不是桌面”的中间态
- 测试重点不是“是否切换”，而是“切换瞬间是否闪动或重排”：避免在
flex-direction切换时同时动画width或opacity
