在多行中水平对齐多个项目

Question

我需要在外部div中对齐几个元素。

元素的代码如下：

<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
:
:
<div>ItemN</div>
</div>

每个项目的宽度是相同的。

我知道每行会有5个项目，但我不知道总共会有多少个项目。

我需要的是，剩下的项目将在最后一行的中心。

例如，对于7个项目：

[xxx][xxx][xxx][xxx][xxx]
[xxx][xxx]

有办法做到这一点吗？

Answer 1

将dispaly:flex、flex-wrap:wrap;和justify-content:center;添加到.box，并为width:20%;内的每个div设置

.box {
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.box > div {
width:20%;
}

<div class="box">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>ItemN</div>
<div>ItemN</div>
<div>ItemN</div>
<div>ItemN</div>
<div>ItemN</div>
<div>ItemN</div>
<div>ItemN</div>
</div>