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，否则首尾卡片会贴边。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

文字内容不换行？先看 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 的像素值如何协同不打架——这时靠媒体查询微调比硬编码更可靠。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！