flex-wrap不生效主因是子项min-width: auto锁死宽度、父容器缺明确宽度、white-space: nowrap或overflow-wrap未配合min-width: 0；需三者协同修复。
移动端自动换行布局失效，八成不是代码写错了，而是没意识到“换行”在不同上下文里根本不是一回事——文本内容换行、Flex 子项换行、Grid 列数调整，三者触发条件和修复点完全不同。
flex-wrap: wrap 不生效？检查子项是否锁死了宽度
Flex 容器写了 flex-wrap: wrap 却还是单行挤出屏幕，常见于卡片列表或图标组。这不是属性没起作用，而是子元素自己“拒绝变窄”：
-
flex子项默认min-width: auto，会阻止内容收缩，导致换行逻辑被跳过 - 子项设了
flex-basis或width且值过大（比如width: 300px），小屏下直接撑爆容器 - 父容器未设明确宽度（如
width: 100%），而子项又用了flex: 1，浏览器可能按视口宽计算，不触发换行
实操建议：给子项加 min-width: 0 + flex: 0 0 calc(50% - 0.5rem)（双列）或 flex: 0 0 100%（单列），再配 gap 控制间距。
Grid 自动换行卡在单列？minmax() 的最小值设太高了
用 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))) 在 iPhone SE（375px 宽）上只显示一列，是因为 300px 太接近屏幕宽度，剩余空间不够塞进第二张卡片。
立即学习“前端免费学习笔记（深入）”；
- 别硬套桌面端数值，移动端建议降到
minmax(260px, 1fr)或minmax(240px, 1fr) - 若卡片内含图片，确保
img设了width: 100%; height: auto;，否则图片溢出会撑开网格项 - 旧版 Safari 对
auto-fill解析不稳定，可加grid-auto-flow: row;显式声明流向（极少需用）
注意：gap 会从容器内边距开始计算，别忘了给父容器留出 padding，否则首尾卡片会贴边。
文字内容不换行？先看 white-space 和 overflow-wrap 是否冲突
卡片标题或描述文字溢出容器，不是没写换行，而是被样式锁死了：
- 父级或自身设了
white-space: nowrap（常见于按钮、标签组件的重置样式） - 长 URL / Base64 / 中文无空格串，
white-space: normal也无效，必须加overflow-wrap: break-word - Flex/Grid 容器中，即使写了
overflow-wrap，子项没设min-width: 0依然不换行
推荐组合：white-space: normal; overflow-wrap: break-word; min-width: 0; —— 三者缺一不可，尤其最后一条在 Flex 场景下极易遗漏。
换行后高度参差不齐？Grid 比 Flex 更稳，但得关掉内容拉伸
Flex 下用 flex-wrap: wrap 后，某张卡片文字多、高度暴涨，下一行从它底部开始排，视觉错位；Grid 天然等高，但有个隐藏开关：
- Grid 默认按行分配高度，整行会被最高卡片拉高 → 若想每张卡片独立撑高，加
align-content: start - 卡片内部有绝对定位角标时，务必设
position: relative，否则定位基准错乱 - 别在卡片里用
width: 100%包裹图片，应直接控制img样式，避免嵌套宽度计算偏差
真正难调的不是怎么写换行，而是当卡片内容高度差异大、字体缩放开启、系统字号放大同时发生时，minmax() 的最小值和 gap 的像素值如何协同不打架——这时靠媒体查询微调比硬编码更可靠。
