假设我有一个用户列表，每个用户都有一个附加的号码。列出每个用户，如下所示：
<span><a href="/user/Niet">Niet</a> ⇒ 2</span>
它们都具有以下样式：
.userlist>span {
display: inline-block;
padding: 2px 6px;
border: 1px solid currentColor;
}
这是一个实际的例子：
好的，这看起来不错，用户列表可能会很长，因此紧凑性在这里很重要。我的问题是右边缘非常不一致，所以我想知道是否有任何方法可以改善它。
我的第一个想法当然是在跨度上设置一个固定的宽度。但是，用户名宽度并不是完全可以预测的。您可以有一个叫
iiiii的人和一个叫WWWWW的人，但是由于这不是等宽字体，您会得到“ iiiii”和“ WWWWW”，那里的宽度明显不同。因此，“最大宽度”基本上是允许的最宽字符，即W乘以最大用户名长度。让我们尝试一下...w如果这是我要得到的结果，我不妨使用
<ul>。下一个想法可能是涉及display:table的问题，以使各列之间的宽度保持一致，同时仍保持动态，并且-假设大多数人的用户名都合理（*咳嗽* ...哦，嘿，所以这就是您摆脱Markdown的方式...呵呵...）-但是它的结局往往还是有很多空白。因此，我目前的想法是某种合理对齐。这对文字效果很好，对吧？但可惜的是，在这种情况下，
text-align: justify确实会引起麻烦，这可能是因为要证明的元素之间没有空格。我最后的尝试是使用flexbox，这已经在网站的新设计中得到了很好的使用。让我们看一下容器的
display: flex; flex-wrap: wrap;和元素的flex: 1 0 auto;的外观...嗯，看起来还不错。一点也不差
嗯很近。我真正想要的是元素的最后一行不会一直延伸到整个范围。最后一行有3或4个是可以的，但是两个看起来有点傻，只有一个填充了整个宽度，看起来很荒谬。
所以我想这整个小冒险可以归结为一个简单的问题：
我如何才能实现类似“对齐对齐”的行为，其中元素之间的间距应使用容器的整个宽度，但在最后一行中应使用其自然宽度的元素除外？
为了完成这个小故事，感谢@Michael_B的回答，这是我实现该解决方案的方式：
.userlist:after {
content: '';
flex: 10 0 auto;
}
结果：
美丽。
最佳答案
使用flexbox创建3或4个始终占据最后一个插槽的“幻像”项目。
因此，例如，用户＃82当前是您的最后一个条目。
使用visibility: hidden将虚假用户设为83、84、85。
或者，在末尾使用visibility: hidden和flex-grow: 10尝试一个幻像项。使用:last-child或:last-of-type伪类定位它。
关于html - 在最后一行上正确调整伸缩元素的大小并对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35063053/