在网页交互组件开发中，水平排列的按钮组是常见需求，既需要按钮根据内容长度自动调整宽度保持等宽显示，又需要在小屏幕下自动堆叠为垂直布局，避免内容挤压或溢出。传统的实现方式往往需要手动设置媒体查询断点，或者给按钮固定宽度，不仅适配性差，维护成本也比较高。下面介绍一种纯CSS的实现方案，不需要额外编写JavaScript逻辑，就能满足上述需求。
核心实现思路
整个方案基于CSS的flexbox布局和grid布局的特性实现，核心逻辑分为两部分：一是让水平排列的按钮根据内容动态分配等宽空间，二是当容器宽度不足以容纳所有按钮时自动切换为垂直堆叠布局。这里优先推荐使用flexbox结合flex-wrap属性实现，兼容性更好，适配场景也更广泛。
动态等宽的实现原理
要让按钮基于内容动态等宽，核心是利用flexbox的flex属性，给每个按钮设置相同的弹性增长和收缩系数，同时结合min-width限制最小宽度，避免按钮过窄导致内容换行。具体属性设置如下：
flex: 1 1 0：让所有按钮的弹性基准为0，然后根据容器剩余空间平均分配宽度，实现等宽效果min-width: fit-content：保证按钮的最小宽度等于自身内容的宽度，避免内容被截断white-space: nowrap：防止按钮内容自动换行，保证内容完整显示
自动堆叠的实现原理
自动堆叠的核心是flex-wrap: wrap属性，当容器的宽度不足以容纳所有按钮的min-width总和时，多余的按钮会自动换行。如果需要强制在小屏幕下切换为垂直堆叠，可以结合min-width和容器的宽度限制实现，不需要额外的媒体查询。
完整代码实现
HTML结构
按钮组的HTML结构非常简单，只需要一个容器包裹多个按钮元素即可，不需要额外的类名或者嵌套结构：
<div class="btn-group"> <button class="btn">确认提交</button> <button class="btn">取消操作</button> <button class="btn">查看详情</button> <button class="btn">更多选项</button> </div>
CSS样式代码
下面是完整的CSS样式代码，包含按钮组容器和按钮的基础样式，以及动态等宽和自动堆叠的核心逻辑：
/* 按钮组容器样式 */
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 16px;
/* 限制容器最大宽度，模拟不同屏幕场景 */
max-width: 1200px;
margin: 0 auto;
}
/* 单个按钮样式 */
.btn {
/* 核心：动态等宽设置 */
flex: 1 1 0;
min-width: fit-content;
white-space: nowrap;
/* 基础按钮样式，可根据需求调整 */
padding: 10px 20px;
border: none;
border-radius: 6px;
background-color: #1677ff;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: background-color 0.2s;
}
/* 按钮 hover 效果 */
.btn:hover {
background-color: #4096ff;
}
/* 第二个按钮设置为次要按钮样式，演示不同内容长度的场景 */
.btn:nth-child(2) {
background-color: #fff;
color: #1677ff;
border: 1px solid #1677ff;
}
.btn:nth-child(2):hover {
background-color: #f0f5ff;
}
效果验证与适配说明
上述代码实现后，在宽屏场景下，所有按钮会自动分配容器的剩余空间，保持等宽显示，同时每个按钮的宽度不会小于自身内容的宽度，避免内容被截断。当屏幕宽度缩小到不足以容纳所有按钮的最小内容宽度总和时，按钮会自动换行，实现堆叠效果。
如果需要强制在小于某个宽度时切换为垂直堆叠，可以给容器添加min-width限制，比如给.btn-group添加min-width: 300px，当容器宽度小于300px时，所有按钮会换行堆叠为垂直布局。也可以根据需求调整gap属性控制按钮之间的间距，调整padding改变按钮的内边距，适配不同的设计需求。
方案优势总结
这种实现方案相比传统的固定宽度或者媒体查询方案有以下优势：
- 纯CSS实现，不需要JavaScript逻辑，性能更好
- 不需要手动设置媒体查询断点，适配不同屏幕尺寸
- 按钮宽度基于内容动态计算，不会出现内容溢出或者截断问题
- 代码简洁，可复用性高，只需要修改按钮的基础样式就能适配不同设计
如果需要在不支持fit-content的旧版本浏览器中使用，可以将min-width: fit-content替换为min-width: max-content，兼容性会更好，不过max-content会忽略容器的宽度限制，需要根据实际场景选择。