Flex布局用display: flex+flex-wrap: wrap实现自动换行，图标设width/height统一盒模型，优先gap控制间距，align-items设为flex-start确保顶部对齐，响应式用flex-basis配合calc()弹性分配列数。
用 display: flex + flex-wrap: wrap 最直接
Flex 布局是目前最稳、最可控的方案，不需要计算列数或响应断点，浏览器自动换行。关键不是“铺满再换”，而是让容器允许子项换行，并给子项设好尺寸和间距。
-
display: flex必须加在图标父容器上，不是图标本身 -
flex-wrap: wrap缺一不可，否则图标会强行挤在一行导致溢出 - 图标建议用
inline-block或flex子项（如svg或i），避免用float或display: block - 水平间距推荐用
gap（现代浏览器支持良好），比margin更干净，不会引发外边距合并问题
图标尺寸和间距怎么设才不挤又不散
图标实际占位受宽高、内边距、边框、字体大小（如果是 icon font）共同影响，光设 width 不够。
- 统一用
width和height控制图标盒模型（比如都设为24px），避免 SVG 自适应缩放错乱 - 横向间距优先用
gap: 12px，而不是给每个图标加margin-right；否则最后一项多出空白，且换行后首行左侧没空隙 - 如果必须兼容老浏览器（IE），
gap不生效，改用margin并配合:not(:last-child)去掉末尾项的右/下边距 - 图标容器若设了
justify-content: center，整行居中时，换行后每行仍独立居中——这不是 bug，是预期行为
遇到 flex 换行错位或高度不齐怎么办
常见现象是第二行图标顶部参差不齐，或某图标文字标签撑高了整行。本质是 align-items 默认值和基线对齐惹的祸。
- 把父容器的
align-items改成flex-start，强制所有图标顶部对齐 - 如果图标带文字说明（如
div包着svg+span），确保文字用vertical-align: top或设display: block，别让它按基线（baseline）对齐 - 避免子项用
align-self: center等局部覆盖，容易破坏整体对齐逻辑 - 调试时临时加
outline: 1px solid red看真实占位，比靠眼睛猜准得多
响应式场景下图标自动变列数？别硬算，用 min-width 配合 flex
想在小屏变 3 列、中屏 5 列、大屏 8 列？不用媒体查询硬切，用 flex 的弹性分配更轻量。
立即学习“前端免费学习笔记（深入）”；
- 给每个图标容器设
flex: 1 1 calc(20% - 8px)：意思是“最小宽度约 20%，减去 gap 占位”，这样 5 个刚好一排 - 把
calc()中的百分比调低（如15%），就能塞更多；调高（如25%）就变少——数值是提示，不是强制列数 - 注意
flex-basis是初始主轴尺寸，最终是否换行仍由容器宽度和flex-wrap决定 - 真要精确控列（比如必须严格 4 列），还是得用 CSS Grid，
flex天然适合“尽量多塞，塞不下就换行”这类需求
实际项目里最容易被忽略的是图标元素本身的 vertical-align 和父容器的 align-items 组合效果——它不报错，但会让整排看起来歪斜或虚高，调样式时得一起看，不能只盯 margin 和 padding。
