justify-content: space-between 最后一行不左对齐是正常行为，因它仅按整行总宽分配剩余空间，不识别最后一行；需用::after伪元素补位或js动态插入占位节点解决。
justify-content: space-between 为什么最后一行不左对齐
写了 justify-content: space-between，但最后一行只有 2 张卡片时，它们仍被拉到左右边缘、中间空一大块——这不是 bug，而是 flex 的设计逻辑：它只按「整行总宽」分配剩余空间，不识别“这是最后一行”。浏览器不会主动给最后一行特殊待遇。
常见错误现象包括：flex-wrap: wrap 已启用，但最后一行卡片间距异常；或加了 align-content: flex-start 仍无效，说明问题不在多行对齐，而在 space-between 本身无法处理“不满行”的情况。
- 必须确认父容器有明确宽度（比如
width: 100%或嵌套在有约束的容器中），否则主轴长度不确定，space-between无法计算“剩余空间” - 子项不能设
flex: 1或width: 100%，否则会抢占全部空间，让 space-between 失效 - 避免给子项加
margin-right或margin-left，它们会干扰 flex 的间隙计算
::after 伪元素补位要满足哪几个硬条件
用 ::after 在末尾插入占位符，是轻量且无需 JS 的主流解法，但它不是写上就生效。
- 父容器必须声明
display: flex且flex-wrap: wrap，否则伪元素没机会换行 -
::after必须有content: ""，否则不参与 flex 排列 - 伪元素需设
flex: 0 0 [单张卡片宽度]，单位必须和子项一致（如子项用flex: 0 0 24%，伪元素也得用24%） - 不能设
visibility: hidden或opacity: 0，这会让 flex 引擎忽略其尺寸；稳妥做法是height: 0; overflow: hidden;
示例：
.card-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card-grid::after {
content: "";
flex: 0 0 24%; /* 和 .card 的宽度一致 */
height: 0;
overflow: hidden;
}
响应式下伪元素宽度怎么动态匹配
当屏幕变小、每行卡片数从 4 变成 2，伪元素若还固定 24%，就会在小屏多出空白甚至撑破布局。
解决方法是配合媒体查询重置伪元素宽度：
- 大屏（每行 4 张）：伪元素
flex: 0 0 24% - 中屏（每行 2 张）：伪元素
flex: 0 0 48% - 小屏（每行 1 张）：伪元素
flex: 0 0 100%，或直接display: none（此时无需补位）
注意：不要用 max-width 或 min-width 控制伪元素，flex 计算依赖的是 flex-basis，即 flex 声明里的第三个值。
比伪元素更稳的替代方案是什么
伪元素在 iOS Safari 旧版本（≤15.6）中对 flex 容器的支持不稳定；另外，当卡片宽度由 flex-grow 动态分配，或子项存在 display: none 时，硬编码宽度会失效。
这时推荐用 JavaScript 动态补空节点：
- 计算当前容器宽度和单张卡片最小宽度（含 gap），得出每行最多放几张
- 用
Math.ceil(cardCount / itemsPerRow)算出总行数，再算出需补几个空<div class="card-placeholder"></div> - 插入后统一加
display: none或visibility: hidden，确保不影响视觉
关键点：补的是真实 DOM 节点，不受伪元素渲染限制；且可结合 ResizeObserver 监听容器变化，自动重算。
最易被忽略的是：文字溢出未截断。哪怕补位全对，只要某张卡片里一段长标题没设 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，它就会把整行高度顶高，导致所有对齐失效——补位只是表，内容控高才是根。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
