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

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但是因为这不是monospace字体，你会得到“iiiii”和“WWWWW”，那里的宽度非常明显不同。所以“最大宽度”基本上是最宽的允许字符，即W乘以最大用户名长度。我们试试吧......

EW。我不妨使用一个<ul>如果这是我将得到的结果。接下来的想法可能是让display:table宽度在列之间保持一致，同时仍然保持动态并且 - 假设大多数人都有合理的用户名（*咳嗽* ......哦，嘿，这就是你如何逃避Markdown ......呵呵...... 。） - 但它确实往往会留下很多空的空间。

所以我目前的想法是某种合理的对齐。这对文本很有效，对吧？但是，唉，text-align: justify确实在这种情况下完全错误，可能是因为要素之间没有空格。

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

Flexbox的

嗯，这看起来不太糟糕。不太糟糕

失败

......嗯。很近。我真正喜欢的是最后一行元素不会被拉伸到最终。没关系，最后一行有三个或四个，但两个看起来有点傻，只有一个填满整个宽度，看起来很荒谬。

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

我如何实现类似于对齐的行为，其中元素间隔使用容器的整个宽度，除了在它们应该使用它们的自然宽度的最后一行？

要完成这个小故事，感谢@ Michael_B的回答，这就是我如何实现解决方案：

.userlist:after {

    content: '';

    flex: 10 0 auto;

}