左对齐中心对齐flexbox的最后一行

Question

我有一个Flexbox。它的内容是NxN个正方形。我想要容器适合尽可能多的这些方块给定的显示宽度。我想让flexbox在页面中对齐。

然而问题是当我使用

justify-content: center

则最后一行不向左对齐。但是，如果我更改为

css prettyprint-override">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下面添加工作

div:after {
    content: '';
    flex: auto;
    margin: 10px;
    max-width: 300px;
}

但是，它破坏了Ipad和移动屏幕的响应能力，您可以通过添加上面的CSS来解决这个问题，只针对使用媒体查询的大屏幕。

我不建议这样做，如果可能的话，就像@Nathan所说的那样，将flex-box切换到网格

Answer 2

您正在构建的布局是一个相当标准的网格。CSS网格将比FlexBox更适合。

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

示例：

null

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>