flex-wrap: wrap 是图标自动换行的必要前提，必须显式声明；默认 nowrap 会强制单行溢出，只有设为 wrap 后浏览器才判断空间是否充足并触发折行，配合 align-content 控制多行对齐、gap 管理间距、响应式断点按图标宽度+gap精确计算。
flex-wrap: wrap 是图标自动换行的必要前提
不设 flex-wrap: wrap，图标死活不会换行——哪怕容器窄到只剩 10px，所有图标仍强行挤在一行，溢出或压缩。默认值是 nowrap，它只管“排满”，不管“排不下”。必须显式写上 flex-wrap: wrap，浏览器才开始判断“这一行还能不能塞下下一个图标”，并触发折行逻辑。
常见错误现象：图标在小屏上横向滚动、被压扁、或完全消失（因 overflow: hidden 隐藏了溢出部分）。根本原因不是媒体查询没写，而是父容器漏了 flex-wrap: wrap。
- 只设
display: flex不够，flex-wrap必须单独声明 - 如果用了
flex-direction: column，wrap会按列方向换行（即“换列”），多数图标栏不需要这个 -
wrap-reverse会让新行插在旧行上方，容易导致视觉错乱，调试时发现图标从底部往上堆叠，大概率是误设了这个值
为什么图标换行后对不齐？align-content 和 justify-content 的分工要搞清
justify-content 控制每行内部图标的水平对齐（主轴），比如居中、两端对齐；align-content 控制所有行在容器内的垂直分布（交叉轴），比如顶部贴齐、整体居中。很多人只调 justify-content: center，结果换行后多行图标上下松散、空隙难控，就是忽略了 align-content。
典型场景：6 个图标，小屏下变成 2 行 × 3 列，但第二行离第一行太远，或者整体悬浮在容器中间留大片空白。
- 想让所有行贴顶排列（适合导航栏）：加
align-content: flex-start - 想让多行整体垂直居中（如页脚社交图标）：容器需设固定高度（如
height: 120px），再配align-content: center - 用
align-content: stretch（默认）时，若容器没设高度，行高会被拉满，图标可能被意外撑开
gap 比 margin 更干净地控制图标间距
用 margin-right 或 margin-bottom 给图标手动加间隙，会在每行末尾或最后一行底部多出多余空白，响应式换行时尤其难调。而 gap 是 Flex 原生属性，只作用于相邻项目之间，首尾不留空。
注意：gap 在老版本 Safari（iOS 14.5 之前）不支持，如需兼容，得回退到 margin + 伪类清除，但绝大多数现代项目可放心用。
-
gap: 12px同时控制水平和垂直间距，等价于row-gap: 12px; column-gap: 12px - 如果只要水平间距（比如单行图标栏），可用
column-gap: 12px，避免影响垂直布局 - 别把
gap和子项的padding混用，后者会扩大点击热区，前者纯属布局留白
响应式断点不该按设备尺寸，而该按图标数量算宽度
“手机设两列、平板三列”这种写法容易失效——实际取决于一行能塞几个图标。每个图标宽高统一为 24px，gap 设 12px，那 4 个图标所需最小宽度就是 4 * 24px + 3 * 12px = 132px。断点就该基于这个算出来的值设，而不是盲目套 @media (max-width: 768px)。
容易踩的坑：断点设得太宽，图标早早就换行，留出大片空白；设得太窄，换行延迟，导致横向滚动。
- 公式：最小容器宽度 =
n * icon-size + (n - 1) * gap，其中n是目标每行图标数 - 推荐写法：
@media (max-width: 131px) { .icon-container { --cols: 1; } }，再用flex-basis: calc(100% / var(--cols))动态分栏（需配合flex: 0 0） - SVG 图标优先用
width/height固定尺寸，避免viewBox缩放导致宽高不一致，破坏换行计算
真正卡住人的往往不是属性不会写，而是换行依赖多个条件协同生效：容器有明确宽度、子项可收缩、flex-wrap 开关打开、gap 或 margin 不冲突、align-content 在多行时才起效。少一个，图标就“倔强”地不肯折行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
