本文介绍使用 flexbox 布局解决按钮中长文本与右侧图标布局冲突的问题，通过 `display: flex` + `align-items: center` + `gap` 和合理设置图标 `flex` 属性，确保文本自动换行、图标始终右对齐且不被推离视图。
在构建响应式 UI 时，常遇到类似需求：一个带图标的按钮（如折叠面板标题）需容纳较长文案，但默认流式布局下，文字会横向撑开容器或强行将右侧图标“挤出”按钮边界——尤其当按钮宽度受限（如移动端）时，问题尤为明显。
根本原因在于原始代码中使用了 float: right 定位图标。浮动元素会脱离文档流，导致父容器无法正确计算内容高度与空间分配；同时文本作为普通块级内联内容，在固定宽度下缺乏明确的换行约束机制，自然优先横向延展而非折行。
✅ 推荐解法：采用现代 Flexbox 布局替代浮动
将 .collapsible 设为弹性容器，并规范子元素行为：
.collapsible {
display: flex; /* 启用弹性布局 */
align-items: center; /* 垂直居中对齐文本与图标 */
gap: 5px; /* 文本与图标间留白（替代 padding/margin 手动计算） */
/* 移除 float 相关声明，保留原有样式如 padding、border 等 */
background-color: white;
color: #021032;
cursor: pointer;
padding-left: 17px;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
border: solid 1px #D1D3D4;
border-radius: 6px;
outline: none;
font-size: 17px;
margin: 5px 0px;
box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.005);
text-align: left; /* 此处仅影响纯文本对齐，不影响 flex 子项 */
}关键点在于图标的样式优化：
.icon {
background-image: url("https://cdn.onlinewebfonts.com/svg/img_231938.png");
background-repeat: no-repeat;
background-size: 25px;
height: 25px;
width: 25px;
transition: rotate .25s ease-in-out;
flex: 0 0 auto; /* 防止图标被压缩或拉伸，保持固有尺寸 */
}- flex: 0 0 auto = flex-grow: 0（不放大）、flex-shrink: 0（不缩小）、flex-basis: auto（按内容宽高），确保图标尺寸稳定；
- 移除 float: right，交由 Flexbox 统一控制排列逻辑；
- 应置于按钮末尾，Flex 默认 flex-direction: row，自然实现“文本在左、图标在右”。
? 注意事项：
- 不要给 .collapsible 设置 white-space: nowrap，否则会禁用换行；
- 若需进一步控制文本最大宽度（例如限制单行显示字数），可对文字内容包裹 并设 max-width: calc(100% - 35px)（预留图标+gap空间），但通常 Flex 自动换行已足够；
- 图标建议使用 或 svg> 替代空 ，语义更清晰且利于无障碍访问；
- 如需图标随按钮状态旋转（如展开/收起），可在 JS 中动态添加类（如 .active .icon { transform: rotate(180deg); }）。
最终效果：无论文案多长，文本自动根据按钮宽度智能折行，图标始终紧贴右侧、垂直居中、尺寸稳定，布局健壮且易于维护。
