移动端按钮组纵向排列应使用 display: flex + flex-direction: column，配合 gap 或 margin 控制间距；需显式设置 width: 100% 防收缩，文本过长时用 white-space: normal + word-break: break-word；注意 iOS 9–11 不支持 gap，需回退至 margin-bottom + :last-of-type 修正。
按钮组在移动端纵向排列的CSS核心思路
直接用 flex-direction: column 是最稳妥的做法，前提是按钮组容器本身是 display: flex。别指望 float 或 inline-block 在小屏上自动换行堆叠——它们会挤成一行溢出，或因宽度计算不准导致错位。
- 确保父容器设为
display: flex，否则flex-direction无效 - 移动端优先写在默认样式里，避免依赖媒体查询增加复杂度
- 如果按钮本身有固定宽高（比如带图标的按钮），纵向排列时注意
width: 100%要显式设置，否则可能收缩
.btn-group {
display: flex;
flex-direction: column;
gap: 8px; /* 替代 margin，更可控 */
}为什么不用 flex-wrap: wrap + width: 100%？
这种写法看似能“让按钮换行”，但在移动端实际效果不可靠：
-
flex-wrap: wrap默认按内容宽度折行，而按钮常设min-width或white-space: nowrap，导致强行撑宽不换行 -
width: 100%在 flex 子项上行为受flex-shrink影响，可能被压缩变形 - 横向布局下加
flex-wrap是为多行横向排列，不是为转纵向
真正需要纵向排列时，flex-direction: column 是唯一语义正确、行为确定的方案。
兼容老版本 iOS Safari 的注意事项
iOS 9–11 的 WebKit 对 gap 支持不全，gap 会被忽略。此时必须退回到 margin 控制间距：
立即学习“前端免费学习笔记（深入）”；
- 不要用
:first-child/:last-child去掉首尾 margin，容易和动态插入/删除按钮逻辑冲突 - 推荐统一给每个按钮加
margin-bottom: 8px，再用:last-of-type { margin-bottom: 0 }修正
.btn-group > * {
margin-bottom: 8px;
}
.btn-group > *:last-of-type {
margin-bottom: 0;
}按钮文字过长时的截断处理
纵向排列后，按钮宽度变窄，长文本容易撑破容器或换行混乱：
- 避免只设
white-space: nowrap，它会让文字溢出 - 推荐组合使用：
white-space: normal（允许换行） +word-break: break-word（中英文都友好） - 若需单行省略，用
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，但必须配合width: 100%和display: block
.btn-group button {
width: 100%;
white-space: normal;
word-break: break-word;
}真正在项目里做，最常漏掉的是容器没设 width: 100% —— flex 容器默认不占满父容器宽度，尤其嵌套在 inline 元素里时，按钮组会缩成一团。
