正确调整最后一行的弹性项目大小并对齐

Question

假设我有一个用户列表，每个用户都附有一些数字。每个用户的列表如下：

<span><a href="/user/Niet">Niet</a> &rArr; 2</span>

它们的样式都是：

.userlist>span {
    display: inline-block;
    padding: 2px 6px;
    border: 1px solid currentColor;
}

这是一个实际的例子：

好的，这看起来不错，用户列表可能会很长，所以紧凑性在这里很重要。我的问题是右边缘非常不一致，所以我想知道是否有任何方法可以改善它。

当然，我的第一个想法是在跨度上设置一个固定的宽度。然而，用户名宽度并不完全可预测。你可以有一个叫iiiii 和一个叫WWWWW 的人，但由于这不是等宽字体，你会得到“iiii”和“WWWWW”，它们的宽度很明显不同。所以“最大宽度”基本上是允许的最宽字符，即W，乘以最大用户名长度。让我们试试……

呃。如果这是我要得到的结果，我不妨使用<ul>。下一个想法可能是涉及display:table 以使列之间的宽度保持一致，同时仍然保持动态 - 假设大多数人都有合理的用户名（*咳嗽* ...哦，嘿，这就是你逃避 Markdown 的方式......嗯...） - 但它确实往往最终仍然有很多空白空间。

所以我目前的想法是某种合理对齐。这对文本非常有效，对吧？但是，唉，text-align: justify 在这种情况下确实搞砸了所有事情，可能是因为要证明的元素之间没有空格。

我的最后一次尝试是使用 flexbox，我已经在网站的新设计中使用，效果很好。让我们看看容器上的display: flex; flex-wrap: wrap; 和元素上的flex: 1 0 auto; 的样子...

嗯，看起来还不错。还不错-

...嗯。很近。我真正想要的是最后一行元素不会一直被拉伸。最后一行有三四个还可以，但是两个看起来有点傻，一个填满整个宽度，看起来很可笑。

所以我想这整个小冒险归结为一个简单的问题：

我怎样才能实现类似 justify-align 的行为，其中元素被隔开以使用容器的整个宽度，除了在它们应该使用其自然宽度的最后一行？

---

为了完成这个小故事，感谢@Michael_B 的回答，以下是我实施解决方案的方式：

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

结果：

美丽。

Answer 1

使用 flexbox，创建 3 或 4 个始终占据最后一个插槽的“幻像”项目。

因此，例如，用户 #82 当前是您的最后一个条目。

使用visibility: hidden 制作虚假用户 83、84、85。

或者，在末尾只尝试一个幻像项目visibility: hidden 和flex-grow: 10。使用:last-child 或:last-of-type 伪类定位它。