小编Bob*_*Bob的帖子

我有一个弹性盒。它的内容是 NxN 正方形。我希望容器在给定显示宽度的情况下容纳尽可能多的这些正方形。我希望弹性盒在页面上居中对齐。

然而问题是当我使用

justify-content: center

图像：

那么最后一行不左对齐。但是如果我改为

justify-content: left

图像：

那么整个容器不再在页面上居中对齐显示。我能否以某种方式实现两者的混合，所以在这个例子中，我将集中对齐 5 个项目，但最后一行将与前一行中的第一个项目对齐？

最小重现：

<style>
  div { display: flex; flex-wrap: wrap; justify-content: center; }
  i { display: block; width: 300px; height: 300px; background: black; margin: 10px; }
</style>
<div>
  <i></i> <i></i> <i></i> <i></i> <i></i>
  <i></i> <i></i> <i></i>
</div>