html - 在最后一行正确调整 flex 元素的大小和对齐

Question

假设我有一个用户列表，每个用户都附有一些数字。每个用户都是这样列出的:

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

它们的样式都是:

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

这是一个实际的例子:

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

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

呃。我不妨使用 <ul>如果那是我要得到的结果。下一个想法可能涉及 display:table。让宽度在各列之间保持一致，同时仍然保持动态 - 假设大多数人都有合理的用户名(*咳嗽* ... 哦嘿，这就是你如何逃避 Markdown ... 呵呵 ...)最终仍然有很多空白空间。

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

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

嗯，看起来还不错。一点都不差-

……嗯。很近。我真正想要的是最后一行元素不会一直 flex 。最后一行有三四个没关系，但是两个看起来有点傻，一个就填满了整个宽度，看起来很可笑。

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

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

---

为了完成这个小故事，感谢@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 伪类作为目标。