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

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

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

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

我的最后一次尝试是使用flexbox，我已经在网站的新设计中使用了这一功能。让我们看一下容器上display: flex; flex-wrap: wrap;的外观，以及元素上的flex: 1 0 auto; ......

嗯，这看起来并不太糟糕。在al -

上也不错

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

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

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

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

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

结果：

美丽。

Answer 1

使用flexbox，创建3或4＆＃34;幻像＆＃34;总是占据最后一个位置的物品。

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

使用visibility: hidden伪造用户83,84,85。

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