我有一个Flexbox。它的内容是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>
您正在构建的布局是一个相当标准的网格。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>
我在这里找到了答案
在CSS下面添加工作
div:after {
content: '';
flex: auto;
margin: 10px;
max-width: 300px;
}
但是，它破坏了Ipad和移动屏幕的响应能力，您可以通过添加上面的CSS来解决这个问题，只针对使用媒体查询的大屏幕。
我不建议这样做，如果可能的话，就像@Nathan所说的那样，将flex-box切换到网格
