如何在柔性包装上证明物品的合理性

Question

我有一个元素及其子元素。我正在为css应用flexbox。我在上面使用了柔性包装，以便在溢出时将项目包装到下一行。但是，当它包装时，我希望顶部的物品有均匀的空间，并占据整个容器的宽度。这可能吗？我可以使用，网格或只是CSS。

我希望从1到6的元素在顶行上均匀分布，其余的项目包裹在第二行中。

注意：我不想应用justify内容：空格均匀，因为它将所有项目隔开，第二行看起来很奇怪

nav{
background: black;
max-width: 300px;
display: flex;
flex-wrap: wrap;
}
a{
color: #0f0;
margin: 10px;
}

<nav>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four five</a>
<a>six</a>
<a>seven eight</a>
<a>nine ten</a>
</nav>

Answer 1

space-between, space-evenly or space-around与伪元素结合应能实现

更优选之间的空间

nav {
background: black;
max-width: 300px;
display: flex;
flex-wrap: wrap;

justify-content: space-between;
}
a {
color: #0f0;
margin: 10px;
}
nav:after {
content: '';
flex: 1;
}

<nav>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four five</a>
<a>six</a>
<a>seven eight</a>
<a>nine ten</a>
</nav>
<p>Longer list </p>
<nav>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four five</a>
<a>six</a>
<a>seven eight</a>
<a>nine ten</a>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four five</a>
<a>six</a>
<a>seven eight</a>
<a>nine ten</a>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four five</a>
<a>six</a>
<a>seven eight</a>
<a>nine ten</a>
</nav>

Answer 2

不确定它是否满足您的所有需求，但我认为您可以像这样做

nav {
background: black;
max-width: 300px;
display:block;
text-align: justify;
}
a {
display: inline-block;
white-space: nowrap;
color: #0f0;
margin: 10px;
}

<nav>
<a>one</a>
<a>two</a>
<a>three</a>
<a>four five</a>
<a>six</a>
<a>seven eight</a>
<a>nine ten</a>
</nav>