Flexbox换行必须设置flex-wrap: wrap，否则子元素永不换行；需配合flex-shrink: 0防压缩、gap或margin控制间距、justify-content: flex-start避免末行对齐异常，并为iOS旧版用@supports兜底gap兼容性。
Flexbox换行必须设flex-wrap: wrap
不加这句，哪怕容器再窄，子元素也死扛着不换行——这是最常被忽略的起点。默认flex-wrap是nowrap，和display: flex一起用时毫无感知，直到在手机上看到标签横向溢出、触发滚动条才反应过来。
实操建议：
- 父容器必须同时声明
display: flex和flex-wrap: wrap，缺一不可 - 别依赖
width: 100%或max-width来“逼”换行——Flexbox换行只看剩余主轴空间是否容不下下一个子项 - 移动端建议搭配
gap: 8px（而非margin）控制标签间距，避免换行后首行末尾与次行开头间距异常
标签宽度用flex-shrink: 0防压缩
默认情况下，Flex子项会主动收缩以适配容器，导致文字被截断或图标变形。尤其在小屏上，flex-shrink: 1（默认值）会让标签越缩越小，最后变成一堆看不清的方块。
实操建议：
- 每个标签元素加
flex-shrink: 0，确保内容尺寸优先，换行由空间不足触发，而非压缩触发 - 配合
min-width: max-content或具体值（如min-width: 64px）进一步锁定最小显示宽度 - 若标签含图标+文字，用
white-space: nowrap防止内部文字意外折行
处理最后一行对齐问题：慎用justify-content: space-between
当标签数不能整除每行数量时，space-between会让最后一行的标签全部挤在左侧，右侧大片留白——视觉上像“没对齐”，其实它严格按规则分配了空白。
实操建议：
- 改用
justify-content: flex-start（默认值），所有行左对齐，观感更自然 - 真要两端对齐，需配合伪元素或JS动态补空标签，纯CSS无可靠解法
- 若设计允许，用
text-align: center配合justify-content: center让整组居中，比强行撑满更稳妥
iOS Safari下gap兼容性要兜底
iOS 14.5以下版本不支持gap，直接写gap: 8px会导致标签紧贴在一起，失去呼吸感。
实操建议：
- 用
@supports (gap: 8px)包裹gap声明，老版本回退到margin方案 - 给子元素统一加
margin-right: 8px; margin-bottom: 8px，再用:last-child清除末尾多余边距 - 注意
margin在换行时可能造成次行首标签左侧多出空白，需用margin-left: -8px微调父容器
换行逻辑本身很简单，但真正卡住人的往往是那些“看起来应该自动生效”的默认行为——比如收缩、间距、对齐。动手前先确认flex-wrap开了没，再检查子项有没有偷偷被压扁，比事后调试快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
