CSS图标实现多行显示可通过以下方法：一是利用伪元素::before/::after分别添加图标，结合flex布局（如flex-wrap: wrap）使图标换行；二是使用content属性添加换行符（如content: "图标1\n图标2"），配合white-space: pre-wrap保留换行；三是将图标拆分为多个span元素，设置display: inline-block，容器使用flex或grid布局控制换行，伪元素方法中，父元素设display: flex; flex-wrap: wrap，子图标元素设margin控制间距，即可实现多行排列。
CSS图标多行布局全攻略：从Flex弹性排列到Grid精准网格
在现代化的Web界面设计中，图标早已超越了“装饰”的范畴，成为提升信息传达效率和用户体验的核心视觉语言，无论是移动端的快捷入口、后台系统的功能导航，还是营销落地页的特性展示，我们经常面临大量图标多行排列的需求。
如何让这些图标在不同屏幕尺寸下既能自动换行，又能保持优雅的对齐与间距？本文将从实际场景出发,为你深度解析从Flex弹性布局到Grid网格布局的进阶之道。
场景还原：为什么我们需要“多行布局”？
在代码实现之前，我们需要先厘清业务场景,多行图标布局通常出现在以下四种高频场景中：
- 移动端金刚区/快捷导航：首屏顶部的核心入口，通常是“5列×2行”或“4列×3行”的矩阵，要求图标与文字垂直居中,且触控区域友好。
- 功能特性展示：产品介绍页的“核心优势”板块，通常是“图标+标题+描述”的卡片组合，大屏三列,小屏单列。
- 素材库/应用墙：图片库、表情包或App列表，数量不确定,需要自动填充剩余空间。
- 响应式仪表盘：数据概览卡片,需要根据视口宽度动态调整每行显示的个数。
核心痛点总结：我们需要的是一种“容器宽度有限，内容自动换行，对齐方式可控，且无需媒体查询即可适应基础变化”的布局方案。
基础方案：Flex布局（弹性与流动性）
Flexbox（弹性盒子）是处理一维布局的神器，虽然它主要处理单行或单列，但通过flex-wrap属性,它能非常完美地解决多行排列问题。
核心原理
- 容器设置：
display: flex启用弹性模式，`flex-wrap: wrap
