基础技能：使用 flex-wrap: wrap 实现多行按钮
flex-wrap: wrap 的工作原理
在一个 flex 容器中，子元素会按照主轴方向进行排列，当空间不足时，flex-wrap: wrap 会让部分项目折行，从而实现多行的按钮排布，避免单行过长导致的横向滚动或挤压。
要观察这一行为，首先需要将父容器设置为 display: flex，然后应用 flex-wrap，按钮就能在容器宽度变化时自动换行。
在实际场景中，换行能力与主轴对齐方式（justify-content）的搭配直接影响最终的观感，例如当多行按钮堆叠时，是否希望各行居中对齐或两端对齐，这是一个重要的设计点。
/* 基础示例：Flex 容器可换行 */
.btn-group {display: flex;flex-wrap: wrap;gap: 8px; /* 行内间距（同一行）与列间距的简便方式 */padding: 8px;
}
.btn {flex: 0 0 auto;padding: 8px 12px;border-radius: 6px;border: 1px solid #ccc;
}justify-content 的常用取值及其影响
justify-content 决定主轴上子项的对齐方式，尤其在有多行时更能体现排布的美观与一致性。
常用取值包括 flex-start、center、space-between、space-around、space-evenly，它们分别影响每一行内按钮的起始位置和行间分布。
在实现多行按钮时，将 flex-wrap 与 justify-content 结合使用，可以实现诸如“多行居中”、“多行两端对齐”的效果，从而提升界面的整洁度。
/* 多行按钮居中对齐的示例 */
.btn-group {display: flex;flex-wrap: wrap;justify-content: center; /* 会在每行内水平居中按钮 */gap: 8px;
}
实战案例：在页面中应用多行按钮排列
简单按钮组在导航栏中的实现
在导航区域中，按钮通常数量不固定，使用 flex-wrap: wrap 可以确保当浏览器窄化时按钮会自动换行，避免遮挡和滚动。
为了在不同长度的导航中保持美观，结合 justify-content: space-between 或 center 可以实现对齐的灵活性，同时通过 gap 属性实现行内与列间的统一间距。
下面给出一个简洁的导航按钮组结构示例，您可以直接在页面中替换按钮文本进行试验。
<nav class="site-nav"><div class="btn-group"><button class="btn">首页</button><button class="btn">产品</button><button class="btn">解决方案</button><button class="btn">案例</button><button class="btn">关于我们</button><button class="btn">联系</button></div>
</nav>/* 导航按钮组的基本样式（换行与对齐示例） */
.site-nav .btn-group {display: flex;flex-wrap: wrap;justify-content: space-between; /* 行内两端对齐，提高行与行之间的呼吸感 */gap: 8px;
}
.site-nav .btn {flex: 0 0 auto;padding: 8px 14px;
}
响应式按钮组，适配手机和平板
在移动设备上，屏幕宽度通常较窄，flex-wrap 会自动将按钮折行，保持按钮可点击区域的可用性。
通过对 justify-content 的微调，可以在不同分辨率下保持版式的稳定性与美观性，确保多行按钮在各种设备上都能达到预期效果。
以下为在移动端的简明设置，确保按钮在多行时仍然整齐排列。
@media (max-width: 600px) {.btn-group {justify-content: center;}
}
进阶技巧：优化换行按钮的可访问性与性能
提升可访问性：焦点顺序与键盘导航
在可访问性方面，确保焦点在多行按钮中的自然跳转至关重要，确保按钮的顺序与视觉呈现一致，并且为聚焦状态提供清晰的轮廓样式。
合理的焦点样式不仅能提升可访问性，也能帮助用户在多行布局中快速定位目标按钮。
实现要点包括为按钮添加明确的聚焦样式和可预测的焦点顺序，避免因换行导致焦点跳跃不连贯的情况。
/* 可访问性焦点样式示例 */
.btn:focus {outline: 3px solid #2a8cff;outline-offset: 2px;
}
性能与布局的微调
在性能层面，合理设置按钮的最小宽度与固定高度，可以减少浏览器重排次数、提升滚动流畅度，避免过度依赖强制换行导致的重排。
通过让按钮具备固定的最小宽度或使用 flex: 0 0 auto，可以让每个按钮的尺寸更加稳定，从而提升渲染性能。
/* 通过最小宽度与固定尺寸提升稳定性 */
.btn {min-width: 84px;height: 36px;flex: 0 0 auto;
}
