左对齐中心对齐弹性盒的最后一行

Question

我有一个弹性盒。它的内容是 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>

Answer 1

您正在构建的布局是一个非常标准的网格。CSS 网格将比 Flexbox 更适合。

通过使用auto-fit列并将每个列设置为固定大小，它将在容器内容纳尽可能多的列。justify-content: center将使您的列居中，但内容仍会从左到右在这些列中移动。

例子：

div {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, 160px);
    justify-content: center;
}

span {
    background: red;
    display: block;
    height: 160px;
}

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>