flex-wrap: wrap在手机上不换行，是因为它根本没被触发；主因是父容器缺width/max-width约束、子项含white-space: nowrap或未设flex-shrink: 1，导致浏览器判定空间充足而不换行。
flex-wrap: wrap 为什么在手机上不换行
不是属性写错了，是它根本没被触发。移动端图标排版卡死一行、横向滚动或右侧溢出，90% 是因为父容器没设 width 或 max-width，浏览器判定“空间永远够”，flex-wrap: wrap 就形同虚设。
- 只写
display: flex不加宽度约束 → 容器按内容撑开，不触发换行 - 父容器是
inline-flex或被position: absolute包裹但没设宽 → 宽度坍缩，wrap失效 - 图标外层用了
white-space: nowrap（常见于第三方 UI 库重置样式）→ 直接锁死文本类图标的换行能力 - 写了
flex-flow: wrap row→ 顺序错误，整条声明被浏览器忽略（正确是flex-flow: row wrap）
移动端图标换行的最小可靠配置
别堆媒体查询，先让基础换行跑通。以下四行是真正在 iOS 和 Android WebView 上都起效的底线：
-
width: 100%必须写，max-width在某些旧版 Android WebView 下不触发换行逻辑 -
gap: 8px控制图标间距，比margin更干净（首尾无多余空白） - 每个图标外层加
flex-shrink: 1和min-width: 0，防长文字图标卡住换行判断 - 图标本身用
max-width: 100%+height: auto，避免 SVG 或 img 被拉伸变形
示例：
.icon-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 8px;
}
<p>.icon-item {
flex: 1 1 80px;
min-width: 0;
text-align: center;
}</p><p>.icon-item svg,
.icon-item img {
max-width: 100%;
height: auto;
}</p>
小屏下图标被压缩或错位怎么办
图标被压扁、文字挤成一团、或者换行后留白过大，本质是子项尺寸不可控。Flex 默认 flex-shrink: 1，会主动缩小图标容器来腾空间——这对图片和文字都不友好。
- 别用
flex: 1，它隐含flex-shrink: 1，等于邀请压缩 - 改用
flex: 0 0 calc(33.333% - 8px)控制三列，calc(50% - 8px)控制两列，靠flex-basis而不是改父容器宽 - 若图标含文字（如“设置”“消息”），必须加
white-space: normal，否则继承的nowrap会阻止折行 - 旧版 Safari（iOS 14.5 之前）不支持
gap→ 加降级：margin: 0 4px 4px 0，再用@supports (gap: 1px)覆盖
align-content 和 justify-content 别乱配
换行后图标上下/左右对不齐，常因混淆了单行与多行的对齐控制逻辑。
-
justify-content只管**每行内部**的水平对齐（比如center让每行图标居中），但它在仅剩一个图标时会把它推到最右，看起来像“没换行” -
align-content才管**行与行之间**的垂直分布（比如flex-start让所有行贴顶，center需容器有固定高） - 设了
align-content却没效果？大概率当前只有一行 → 该属性只在多行时生效 - 图标高度不一（比如有的带文字、有的纯图标）时，
align-items: flex-start比默认的stretch更可控
真正容易被忽略的是：viewport meta 缺失或 box-sizing 混乱会让 padding/border 吃掉可用宽度，导致换行点比预期早出现——哪怕 CSS 全对，HTML 里漏了 <meta name="viewport" content="width=device-width"> 或没重置 * { box-sizing: border-box }，就可能在某台安卓机上突然失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
