按钮组小屏挤成两行的解决方法是：父容器设 display: flex 和 flex-wrap: nowrap，子按钮用 flex 分配空间（如 flex: 1 或 flex: 2/1）并加 min-width，配合媒体查询调小 padding、gap 和 font-size，必要时用 text-overflow: ellipsis 或 clamp() 控制文字。
按钮组在小屏下挤成两行，本质是容器宽度不足、子项 flex 项目未合理分配空间。用 flex 布局配合媒体查询动态调整子项宽度比例，就能让按钮在小屏也保持单行、不换行、不溢出。
确保父容器是 flex 且不换行
按钮组的父容器必须启用 flex，并禁止换行：
- 设置
display: flex - 加上
flex-wrap: nowrap（默认值，但显式声明更稳妥） - 避免父容器设固定宽或
width: 100%后被外层压缩（可加min-width: 0防收缩）
给按钮设弹性宽度而非固定宽
别用 width: 120px 这类固定值，改用 flex 相关属性按比例分配空间：
-
flex: 1—— 等分剩余空间（适合同权重按钮） -
flex: 2和flex: 1—— 按 2:1 分配（适合主次按钮） - 搭配
min-width: 80px防过窄（尤其文字多时）
小屏用媒体查询微调比例和内边距
在屏幕变窄时，适当缩小按钮内边距、调整 flex 比例，避免撑破容器：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) {
.btn-group {
gap: 4px; /* 缩小按钮间距 */
}
.btn-primary {
flex: 2;
}
.btn-secondary {
flex: 1;
}
.btn {
padding: 6px 12px; /* 减小内边距 */
font-size: 14px;
}
}必要时允许内容省略或换行控制
极端窄屏（如 iPhone 竖屏 375px）下，文字可能溢出。可加：
-
white-space: nowrap防文字换行（保持按钮紧凑） -
overflow: hidden; text-overflow: ellipsis;截断超长文字（需配合display: block） - 或提前用
font-size: clamp(14px, 4vw, 16px)做响应式字号
基本上就这些。核心是：flex 分配 + nowrap 保单行 + 媒体查询降级微调。不复杂但容易忽略 min-width 和 padding 的协同影响。
