推荐首选CSS Grid替代，因其天然支持二维布局且能严格左对齐最后一行；其次可用Flex+伪元素占位；再者可动态margin调整；justify-content和align-content无法解决该问题。
Flex 布局默认不支持“多行 + 最后一行严格左对齐”这种二维语义，尤其在用 justify-content: space-between 时，最后一行会按剩余空间均分，造成视觉错位。要实现商品列表的多行多列且最后一行左对齐，关键不是强行用 Flex 拉扯，而是选对策略——下面几种方法按推荐度和实用性排列：
✅ 推荐首选：CSS Grid 替代（最干净、最可控）
Grid 天然支持行列二维控制，无需 hack，兼容性已覆盖主流浏览器（Chrome/Firefox/Safari/Edge ≥ 2021，IE 不再推荐）。
- 用
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))自动计算每行列数 - 搭配
justify-content: start确保整行内容左对齐 -
gap: 12px统一内外间距，比 flex 的 margin 更可靠
示例代码：
.container {display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) );
gap: 12px;
justify-content: start;
}
.item { width: 100%; height: 200px; background: #f9f9f9; }
? 方案二：Flex + 伪元素占位（纯 CSS，无 HTML 改动）
当必须用 Flex 且不能改结构时，用 ::after 添加一个“透明占位符”，让浏览器认为最后一行已满，从而触发左对齐逻辑。
- 伪元素设
flex: 0 0 calc(240px - 12px)（宽度 = 商品项宽度 - gap 一半） - 加
height: 0; overflow: hidden;防止撑高容器 - 注意：子项必须用固定宽度（如
width: calc(240px - 12px)）或百分比+gap 计算一致
关键样式：
.container {display: flex;
flex-wrap: wrap;
gap: 12px;
}
.container::after {
content: "";
flex: 0 0 calc(240px - 12px);
height: 0;
overflow: hidden;
}
⚠️ 方案三：动态 margin 调整（适合列数固定、宽度确定）
若每行固定显示 4 个商品（即 width: 24%），可用 :nth-child 精准匹配最后一行元素个数，给末尾项补右外边距，把空位“推走”。
-
.item:last-child:nth-child(4n-1)→ 最后一行剩 3 个 -
.item:last-child:nth-child(4n-2)→ 最后一行剩 2 个 -
.item:last-child:nth-child(4n-3)→ 最后一行剩 1 个 - margin-right 值 = （单个商品宽度 + gap）× 缺失个数
❌ 不起作用的误区
justify-content: flex-start 只影响主轴起点，对多行布局中各自行的内部对齐无效；align-content: flex-start 是控制行与行之间的交叉轴对齐（比如垂直方向堆叠时顶部对齐），和最后一行内元素左对齐无关。
