Flex换行后最后一行间距不均，因gap只作用于相邻项；解决方法包括：①用justify-content:flex-start或center配合gap；②伪元素补位法；③改用Grid布局；④检查flex-basis和min-width防错位。
Flex 布局中使用 flex-wrap: wrap 换行后，最后一行子项间距不均，本质是 gap 只在相邻项目间生效，而末尾空白区域无对应“下一个元素”来分隔，导致视觉上右边或下边留白过大。解决关键在于控制容器内项目的分布方式，而非单纯依赖 gap。
用 justify-content 配合 gap 控制主轴对齐
当子项换行时，若主轴（默认水平）上每行项目数不固定，justify-content: space-between 或 space-around 会让每行内部间距动态调整，但无法解决最后一行右侧空隙过大的问题。更稳妥的做法是：
-
优先使用
justify-content: flex-start（默认值），配合固定宽度 +gap，让每行左对齐，间隙均匀分布在项目之间 - 若需居中布局，改用
justify-content: center，此时整行内容居中，左右空隙对称，视觉更平衡 - 避免在可换行容器中使用
space-between，它会在首尾项目紧贴边缘，中间等距——仅适用于单行且项目数确定的场景
为最后一行单独处理：伪元素补位法
当必须保持 space-between 效果且项目动态增减时，可用 CSS 伪元素模拟“占位项”，强制最后一行也参与等分计算：
- 给容器添加
::after伪元素，设为content: ""、flex: auto（或flex: 1） - 配合
justify-content: space-between，伪元素会占据末尾空白，使真实子项自动等分剩余空间 - 注意：需确保伪元素不影响语义和可访问性，仅作布局辅助
用 grid 替代 flex 实现更可控的换行间距
Flex 的换行本质是“流式折行”，对齐逻辑受限；而 Grid 天然支持二维布局，更适合需要严格栅格对齐的场景：
立即学习“前端免费学习笔记（深入）”；
- 设置
display: grid，用grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))实现响应式列数 - 直接使用
gap，Grid 中 gap 始终作用于所有行列间隙，包括末尾，不会出现 flex 换行后的不均问题 - 如需兼容老浏览器，可将 grid 作为现代方案，flex + 伪元素作为降级方案
检查 flex-basis 和 min-width 防止隐式换行错位
间距异常有时并非 gap 本身问题，而是子项实际尺寸导致换行点偏移：
- 确认子项未设置过大的
flex-basis或min-width，导致某行只能容下更少项目，加剧末行孤立感 - 建议统一用
flex: 0 1 auto或flex: 1配合min-width控制最小宽度，让换行更自然 - 用浏览器开发者工具检查每行真实渲染的项目数和宽度，验证是否因尺寸波动引发布局抖动
