在响应式页面开发中，当按钮组容器宽度不足以容纳所有按钮时，小屏幕下按钮很容易自动换行挤成两行，破坏页面布局的整齐性。这种情况可以通过flex弹性布局和媒体查询配合调整按钮宽度比例来解决。
基础按钮组结构搭建
首先我们先搭建一个简单的水平排列按钮组，使用flex布局让按钮默认水平排列，同时设置基础的内边距和边框样式，避免按钮之间出现不必要的间隙。
<div class="btn-group"> <button class="btn">首页</button> <button class="btn">列表</button> <button class="btn">详情</button> <button class="btn">设置</button> </div>
默认flex布局样式设置
给按钮组容器设置display: flex开启弹性布局，按钮设置flex: 1让它们默认等分容器宽度，同时添加基础样式优化显示效果。
.btn-group {
display: flex;
width: 100%;
gap: 8px;
padding: 12px;
box-sizing: border-box;
}
.btn {
flex: 1;
padding: 10px 0;
border: 1px solid #e5e5e5;
border-radius: 4px;
background-color: #fff;
font-size: 14px;
cursor: pointer;
text-align: center;
}
.btn:hover {
background-color: #f5f5f5;
}
这种默认设置在大屏幕下显示正常，但如果在小屏幕比如宽度小于768px的设备上，按钮内容如果稍长，就可能出现换行的情况。
使用媒体查询调整小屏宽度比例
我们可以通过媒体查询设置不同屏幕断点下的按钮宽度规则，小屏幕下可以让按钮保持单行排列，通过调整flex属性的值控制宽度比例，也可以根据需求调整按钮的最小宽度。
/* 大屏幕默认样式已在上文定义，这里补充小屏适配 */
@media screen and (max-width: 768px) {
.btn-group {
gap: 6px;
padding: 8px;
}
.btn {
/* 小屏幕下每个按钮占25%宽度，保证四个按钮在一行 */
flex: 0 0 25%;
padding: 8px 0;
font-size: 13px;
box-sizing: border-box;
}
}
@media screen and (max-width: 480px) {
.btn {
/* 超小屏幕下缩小按钮宽度比例，避免内容溢出 */
flex: 0 0 22%;
font-size: 12px;
}
}
灵活调整宽度比例的场景
如果按钮组的数量不是固定的4个，我们可以调整flex的计算方式，比如3个按钮时可以让每个按钮占33.33%宽度，5个按钮时占20%宽度，也可以结合min-width属性保证按钮不会被压缩到过小。
/* 3个按钮的组小屏适配 */
@media screen and (max-width: 768px) {
.btn-group.three-btns .btn {
flex: 0 0 33.33%;
}
}
/* 给按钮设置最小宽度，避免内容被挤压 */
.btn {
min-width: 60px;
}
注意事项
- 使用
flex: 0 0 固定比例%时，要记得给按钮设置box-sizing: border-box，避免内边距和边框增加按钮实际宽度导致换行。 - 媒体查询的断点可以根据项目实际的UI设计稿调整，不需要完全按照通用的768px、480px设置。
- 如果按钮内容长度差异很大，可以单独给特定按钮设置
flex-grow属性，让它占据更多剩余空间。
通过flex布局和媒体查询配合调整宽度比例的方法，既可以保证大屏幕下按钮组的灵活排列，也能解决小屏幕下按钮挤成两行的问题，适配不同设备的展示需求。