flex-wrap: wrap不生效的主因是父容器未设显式宽度（如width/max-width）且display: flex未真实启用；需同时满足display: flex、flex-wrap: wrap及宽度约束，缺一不可。
flex-wrap: wrap 不生效？先检查容器宽度和 display 声明
写了 flex-wrap: wrap 却不换行，大概率不是语法错，而是父容器没被约束宽度——Flex 默认按内容撑开，无限宽就不会“放不下”，自然不触发换行。必须显式设置 width、max-width 或让祖先容器有明确尺寸（比如 100% 配合限制外层）。
同时确认 display: flex 真实生效：检查 computed 样式，避免被后续 display: block 覆盖；子项也不能锁死宽度，比如 flex-shrink: 0 或固定大值 width: 400px，否则总宽永远不超限。
- 常见干扰：外层是
display: inline-block或浮动未清除，导致实际可用宽度远小于预期 - 别漏写
display: flex——没有它，flex-wrap完全不进入 Flex 模式
gap 是首选，但必须满足两个硬条件
gap 能干净控制行距（row-gap）和列距（column-gap），不折叠、不溢出、不依赖 DOM 顺序，现代项目应优先用它。但它只在以下两个条件同时满足时才对换行生效：
-
display: flex或display: inline-flex已真实启用 -
flex-wrap: wrap（或wrap-reverse）已显式声明；flex-wrap: nowrap下row-gap无效
Safari ≤15.4 对 gap 支持不稳定，建议用 @supports (row-gap: 1px) 包裹降级样式。另外，align-items: stretch（默认值）会让子项拉满交叉轴高度，把 row-gap 的空白“藏”进子项内部，看起来像没起作用——改用 flex-start 或 center 才能看清真实间距。
最后一行间距不均？别硬调 margin，优先用 justify-content 或伪元素
Flex 的 gap 只在相邻项之间生效，末尾空白区域无对应“下一个元素”，所以最后一行右侧或下方容易留白过大。这不是 bug，是机制使然。
- 最稳妥：用
justify-content: flex-start（默认） + 固定子项宽度 +gap，左对齐保证每行间隙均匀 - 需居中：改用
justify-content: center，整行内容居中，左右空隙对称，视觉更平衡 - 必须用
space-between？加::after伪元素：content: ""+flex: auto，让它占位末尾，强制等分计算
别用 margin-right + margin-bottom 组合补间隙——换行点处右边距会错位，底部负边距又难对齐，极易引发横向滚动或视觉偏差。
需要兼容 IE11 或老 WebView？用 margin + 负 margin，但写法要精准
当必须支持旧环境时，margin 仍是可靠选择，但必须配负 margin 抵消首尾多余空白，否则末行下方会多出一倍间距。
- 横向布局：给第 2 个及之后的子项设
margin-left: 12px，再给容器加margin-left: -12px - 纵向布局：用
margin-top: 12px（非margin-bottom），再给容器加margin-top: -12px - 若子项有
border或padding，负 margin 值需包含这些尺寸，否则视觉间隙仍在
HTML 中子项间的换行符、空格会被解析为文本节点，产生约 3–4px 间隙——这跟 gap 无关，删掉换行或在父容器上加 font-size: 0 压制即可。这点常被忽略，排查时得单独验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
