本文介绍使用 flexbox 布局解决按钮中长文本与右侧图标布局冲突的问题，通过 `display: flex`、`align-items: center` 和 `flex: 0 0 auto` 精确控制图标尺寸与位置，确保文字自然换行、图标始终居右固定显示。
在构建响应式 ui 时，常遇到类似场景：一个带图标的按钮（如折叠面板标题）需容纳较长描述文本，但默认流式布局下，文本会横向撑开容器，将右侧图标“挤出”可视区域或导致布局错乱。根本原因在于原始代码中 .icon 使用了 Float: right —— 浮动元素脱离文档流，父容器无法正确计算其占据空间，导致文本内容误判可用宽度，进而发生异常位移。
✅ 推荐解决方案是采用现代 css Flexbox 布局，将按钮设为弹性容器，实现图文的语义化、可控排列：
.collapsible { display: flex; /* 启用 Flex 布局 */ align-items: center; /* 垂直居中对齐 */ gap: 5px; /* 图标与文字间留白（替代 padding/margin 手动计算） */ /* 移除 float 相关声明，保留原有样式如 padding、border、font-size 等 */ 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: transform .25s ease-in-out; /* 注意：原代码写为 'rotate'，应为 'transform' */ flex: 0 0 auto; /* 关键！禁止缩放、禁止拉伸、不占用弹性剩余空间 */ }? 关键要点说明：
- flex: 0 0 auto 等价于 flex-grow: 0; flex-shrink: 0; flex-basis: auto，确保图标尺寸绝对固定，不受文本长度或容器宽度变化影响；
- gap: 5px 比手动设置 margin-right 更健壮，避免因浮动/定位引发的边距叠加问题；
- 文本内容无需额外包裹 或设置 white-space: normal（Flex 容器内默认行为即允许换行）；
- ✅ html 结构保持简洁，图标仍作为子元素内联放置，语义清晰：
⚠️ 注意事项：
- 若需支持 IE10+，可添加 -ms-flexbox 前缀（但建议优先保障现代浏览器体验）；
- transition 属性名已修正为 transform（原答案中 rotate 无效），后续可通过 transform: rotate(180deg) 实现点击翻转动画；
- 避免在 .collapsible 上设置 text-align: right/center，Flex 布局下该属性对子项对齐无影响，应使用 justify-content 控制主轴对齐。
此方案兼顾语义性、可维护性与兼容性，是解决「文本换行 vs 图标定位」类布局问题的标准化实践。