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

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;}