justify-content: space-between 对多行 flex 容器的最后一行无效是正常行为，因其仅作用于单行内项目分布；justify-self 在 flex 中非法，属 grid 规范；推荐用 gap + justify-content: flex-start 实现简洁可靠的多行左对齐。
justify-content: space-between 对多行 Flex 容器的最后一行无效，这是正常行为——它只作用于单行内的项目分布，不控制换行后各行之间的对齐逻辑。
为什么 justify-self: start 在 Flex 中不起作用
Flexbox 规范中，justify-self 并不是一个合法的 CSS 属性；它属于 Grid 布局体系。Flex 项只能响应容器级的 justify-content（主轴）和 align-items/align-self（交叉轴），无法单独指定某一行的对齐方式。
- 浏览器会直接忽略
justify-self在 Flex 项上的声明 - 即使写上，DevTools 里也会标为 “invalid property value”
- 想靠它“修复最后一行”，本质是用错了规范
用 :nth-child() + margin-right 精准补空
当每行固定列数（比如 3 列、4 列）时，可基于子元素位置动态加右外边距，让最后一行“视觉上”左对齐。关键不是删空白，而是让末尾项主动收缩右侧空间。
- 假设容器
flex-wrap: wrap，每个子项宽度固定（如flex: 0 0 calc(33.333% - 20px)），间隙由gap或margin控制 - 若每行 3 列，最后一项可能落在第 1、2 或 3 列位置：用
li:last-child:nth-child(3n+1)/(3n+2)/(3n+3)分别匹配 - 对落在第 2 列的末项，加
margin-right: calc((100% - item-width) / 2)；落在第 1 列则无需处理 - 注意：必须配合
box-sizing: border-box和明确的width或flex-basis，否则calc()计算会失准
用 gap + justify-content: flex-start 更干净
如果不需要“两端对齐”的视觉效果，而只是希望所有行都左对齐且等距，直接放弃 space-between，改用 gap 配合 justify-content: flex-start 是最稳妥的现代方案。
-
gap在 Flex 多行中完全可用（Chrome 85+/Firefox 63+/Safari 14.1+），比模拟 margin 更可靠 - 代码极简：
display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px; - 兼容性差的旧环境（如 IE）需回退到
margin模拟，但当前（2026年）已无强必要 - 此法天然规避“最后一行特殊处理”问题，因为所有行都统一左对齐
真正容易被忽略的是：Flex 的“多行对齐”能力其实非常有限，align-content 只能控制行与行在交叉轴上的分布（比如顶部/居中/拉伸），但主轴方向上没有“行内对齐”概念。一旦你发现需要针对最后一行做 hack，大概率说明布局模型选错了——要么该用 Grid（原生支持 justify-content + justify-items 组合），要么该接受 flex-start + gap 的简洁现实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
