html - 左对齐中心对齐 flex 盒的最后一行

Question

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

但是问题出在我使用时

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 更适合。

通过对列使用自动调整并将每个列设置为固定大小，它将在容器内容纳尽可能多的列。 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>