左对齐居中对齐的 flexbox 的最后一行答案

【问题标题】：Left align last row of center-aligned flexbox左对齐居中对齐的 flexbox 的最后一行
【发布时间】：2021-03-21 23:02:15
【问题描述】：

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

【问题讨论】：

嗨，欢迎来到 SO。请添加一个最小的可重现代码 sn-p (ctrl + m) 显示您的代码和问题（专注于最小化）。
谢谢。添加了复制。
愚蠢的问题，但为什么不将父元素居中对齐呢？ :D
对不起，我真的不明白这个问题。我的意思是如果你使用justify-content: left;，那么它会在左边对齐，如果你使用justify-content: center;，它就会居中。
我希望许多元素适合居中对齐。如果我使用justify-content: left;，那么我的 5 个元素（可能是 4 个，或者可能是 6 个等，具体取决于分辨率）不会在父级中居中对齐。而且我不能居中对齐父元素（或者至少我不知道该怎么做），因为 flexbox 占据了 100% 的宽度。

标签： html css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

找到答案here

在 CSS 下添加有效

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

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

我不建议这样做，如果可能的话，如@nathan 所述将 flex-box 切换到网格

【讨论】：