flex-wrap: wrap 未生效主因是父容器缺明确宽度或子项存在固有尺寸（如图片未约束、长文本撑开）；应设父容器宽度、图片用 width: 100%、文字加 word-break: break-word，并避免 gap 与 margin 混用。
flex-wrap: wrap 为什么没生效？
常见现象是商品卡片排成一长条溢出容器，明明写了 flex-wrap: wrap 却不换行。根本原因通常是父容器没设宽度，或子项用了 min-width: 0 以外的固有尺寸（比如图片未约束、文字撑开）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须有明确宽度（如
width: 100%或max-width），不能依赖内容自适应 - 子项加
flex-shrink: 0前先确认是否真需要——电商列表通常要允许压缩，否则小屏直接溢出 - 图片统一用
width: 100%; height: auto; max-width: 100%，避免原始尺寸破坏换行逻辑 - 文字内容用
word-break: break-word防止长商品名（如型号编码）把整行卡住
gap 和 margin 混用导致间距双倍
用 gap 布局时，再给子项写 margin 会导致实际间距翻倍，尤其在响应式断点切换时更难排查。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先只用
gap控制行列间距（row-gap/column-gap），它不参与盒模型计算，更可控 - 如果必须兼容老浏览器（IE），改用
margin+ 负边距抵消（父容器margin: -8px，子项margin: 8px） - 避免在子项上同时写
margin和gap，调试时用浏览器开发者工具的“布局”面板直接看间距来源
商品卡片等高但内容高度不一致怎么办
Flex 默认按内容高度排列，标题长短、描述有无、价格行数不同，会让卡片参差不齐，影响视觉节奏。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器设
display: flex; flex-direction: column，内部区域用flex: 1拉伸（如描述区） - 标题限制行数：用
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden - 价格/按钮区域固定高度或用
margin-top: auto推到底部，保证对齐基准一致 - 慎用
align-items: stretch（默认值），它只拉伸未设高度的子项，已有height的会被忽略
移动端小屏下 gap 过大、卡片被挤变形
PC 上合适的 gap: 16px 到手机上可能只剩两个卡片，且间隙占比过大，显得稀疏空洞。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询分层控制：
@media (max-width: 768px) { .list { gap: 12px; } }，而非一刀切 - 卡片宽度改用
flex: 0 0 calc(50% - 12px)（两列）或calc(100% - 12px)（单列），动态扣减 gap 影响 - 避免在
gap里用rem或em，它会随根字体缩放，小屏下可能意外变大 - 测试真机时重点看 ios safari —— 它对
gap的解析偶尔有微小偏差，可加padding微调
最麻烦的是“文字截断+等高+响应式 gap”三者叠加时的组合行为，每次改一个参数都得重新测三端，别省这步。