我有一个弹性盒。它的内容是 NxN 正方形。我希望容器在给定显示宽度的情况下容纳尽可能多的这些正方形。我希望弹性盒在页面上居中对齐。
然而问题是当我使用
justify-content: center
image:
那么最后一行不左对齐。但是如果我改为
justify-content: left
image:
那么整个容器不再在页面上居中对齐显示。我能否以某种方式实现两者的混合,所以在这个例子中,我将集中对齐 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
将使您的列居中,但内容仍会从左到右在这些列中移动。
Example:
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)