flex-wrap: wrap后子项均分需设flex: 0 0 calc(25% - 8px)或flex-basis配合gap，禁用伸缩并扣除间隙；justify-content仅作用于单行，换行后须靠子项自身尺寸控制。
flex-wrap: wrap 之后子项宽度怎么设才均分？
直接写 flex-wrap: wrap 不会自动均分换行后的每行项目，关键在子项的 flex-basis 或宽度控制。浏览器默认按内容撑开，换行后各行项目数不同，视觉上就不均等。
常见错误是只设 flex: 1 或 width: 25% 却忽略容器 padding、gap 和盒模型影响。
- 推荐用
flex: 0 0 calc(25% - 8px)（假设 4 项一行 +gap: 8px），让基础宽度扣除间隙再均分 - 若使用
gap，必须配合box-sizing: border-box防止 padding 加 gap 导致溢出 - 避免用
width: 25%+float混搭，Flexbox 下 float 会被忽略
justify-content: space-between 在换行时为什么失效？
justify-content 只作用于**单行内**的主轴对齐，换行后每行独立计算，所以第二行可能只剩 1 个子项，space-between 就没意义了。
要实现“每行内部均布”，得靠子项自身尺寸控制，而不是靠 justify-content。
立即学习“前端免费学习笔记（深入）”；
- 用
flex: 0 0 calc((100% - 3 * 8px) / 4)（4 列，gap 8px）确保每行固定列数时宽度一致 - 如果列数不固定（比如响应式从 4→2→1），改用
min-width+flex-wrap更稳妥，例如min-width: 200px - 注意：Chrome 115+ 支持
justify-content: space-evenly，但依然只对单行生效，不能解决跨行均布
响应式换行均布怎么写才不重复写断点？
硬写多个 @media 套 flex-basis 容易漏掉边界情况，更可靠的是用 min-width 驱动自动换行 + flex-grow 微调。
核心思路：让子项有最小宽度底线，容器根据剩余空间决定每行放几个，再用 flex-grow: 1 填满最后一行空隙（可选）。
- 容器设
display: flex; flex-wrap: wrap; gap: 12px - 子项设
flex: 1 1 220px（即flex-grow: 1; flex-shrink: 1; flex-basis: 220px） - 配合
max-width: 100%防止单项超宽破坏布局 - 这样在 320px 屏幕上自动变成 1 列，768px 上大概率 2 列，1200px 上 4 列——无需手动算断点
Firefox 下 gap + flex-wrap 均布偶尔错位怎么办？
旧版 Firefox（gap 在 flex-wrap 容器中的渲染有偏差，尤其当子项含 border 或 padding 时，视觉间距不一致。
这不是代码写错，而是渲染引擎兼容性问题，临时绕过方式有限但有效。
- 降级方案：用
margin替代gap，子项加margin-right和margin-bottom，首项用:nth-child(4n+1)清除右 margin - 或强制触发重排：给容器加
transform: translateZ(0)，对 Firefox 105+ 有改善 - 真正可靠的解法是升级到 Firefox 112+，gap 行为已与 Chrome 对齐
均布的本质不是“绝对像素相等”，而是“在当前行内按比例分配可用空间”。换行后每行独立计算，所以别指望用一个 justify-content 调整所有行——得从子项的 flex-basis 和响应逻辑入手。间隙、盒模型、浏览器版本这三块最容易被跳过，但恰恰决定最终是否对齐。
