必须设flex-wrap: wrap，因默认nowrap强制单行溢出；子项禁用flex: 1或固定width，否则拒绝收缩导致不换行或堆叠过密；需配合gap、min-width及兼容性前缀确保换行稳定。
必须设 flex-wrap: wrap，且子项不能用 flex: 1 或固定 width，否则换行会失效或挤成一团。
为什么操作栏在小屏下不换行，或者换完就堆叠得密不透风？
根本原因不是屏幕太窄，而是 Flex 没被“允许换”，或者换完后子项尺寸失控。常见现象包括：按钮文字重叠、图标被压缩变形、右侧按钮直接消失、出现横向滚动条。这些都不是 CSS 写错了，而是 flex-wrap 和子项弹性行为没协同好。
-
flex-wrap: wrap没写在父容器上——只写display: flex不够，它默认是nowrap，浏览器宁可溢出也绝不折行 - 子项用了
flex: 1或width: 120px：前者会让每个按钮抢满整行，后者在窄屏下强行撑破布局 - 没设
gap或padding：gap只管子项之间，不给容器边缘留白，导致第一行顶到顶部、最后一行贴到底部
怎么让按钮在小屏下自然换行、间距均匀、不缩得太小？
关键不是“等窄了再处理”，而是从一开始就把换行逻辑写稳。操作栏通常内容少、语义明确，适合用可控的基准宽度而非流式伸缩。
- 父容器加
flex-wrap: wrap和gap: 8px（注意：Safari 14.1 以下和 IE11 不支持gap，需回退为margin+ 清除） - 每个按钮设
flex: 0 0 calc(33.333% - 8px)：确保每行最多 3 个，同时避开gap占位干扰 - 加
min-width: 88px（含内边距后的最小可用宽度），防止按钮在极窄屏下缩成一条线 - 容器本身加
padding: 8px，补足gap不覆盖的边缘空白
长文本按钮或带图标的按钮换行后错位怎么办？
操作栏里常有“导出 Excel”“批量删除”这类文字较长的按钮，或带 icon 的 <button><span>编辑</span><i class="icon"></i></button>，它们容易撑开单行、破坏换行节奏。
- 给按钮加
min-width: 0，解除 Flex 对最小尺寸的隐式保护 - 对文字内容加
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，避免长词撑爆 - 图标用
flex-shrink: 0单独控制，防止被压缩变形 - 慎用
align-items: stretch（默认值）：如果按钮高度不一致（比如有的带图标、有的纯文字），会导致视觉参差
IE11 或老版 Safari 下换行突然失效？
这不是配置问题，是渲染引擎差异。尤其当子项用了 flex: 1 或 flex-basis: 0% 时，IE11 的 -ms-flex-wrap: wrap 可能完全不触发换行。
- 彻底弃用
flex: 1，改用flex: 0 0 100px这类显式尺寸声明 - 为容器加双前缀：
display: -ms-flexbox和display: flex，-ms-flex-wrap: wrap和flex-wrap: wrap - 测试时务必用真实 IE11 环境，开发者工具的模拟器不可靠
真正卡住人的，从来不是漏写 flex-wrap: wrap 这一行，而是没意识到：换行效果 = 容器允许换 + 子项愿意缩 + 内容不会撑爆。三者缺一，小屏下要么不换、要么乱换、要么换完没法看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
