在最后一行正确地调整和对齐 flex 项目。

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乘以最大用户名长度。让我们试试吧...

噫。如果那是我要得到的结果，我还不如使用 <ul>。接下来的想法是可能涉及 display:table 来使列的宽度保持一致，同时仍然保持动态性（假设大多数人都有合理的用户名（*咳咳*... 哦，原来是这样逃避Markdown... 呵呵...） - 但它确实会导致很多空白。

所以我的当前想法是某种对齐方式。对于文本来说，这个方法非常有效，对吗？但不幸的是，在这种情况下，text-align: justify 没有任何作用，可能是因为要进行对齐的元素之间没有空格。

我的最后尝试是使用flexbox，在站点的新设计中已经成功使用了。让我们看看将容器的 display: flex; flex-wrap: wrap; 和元素的 flex: 1 0 auto; 结合起来的效果如何......

哦，看起来并不太糟糕。一点也不糟糕-

嗯，很接近了。我真正希望的是最后一行元素不要被 flex 拉伸到整个宽度。当最后一行有三个或四个元素时还好，但只有两个看起来有点傻，只有一个就填满整个宽度，看起来很荒谬。

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

如何实现类似 justify-align 的行为，在这种行为下，元素会在容器中使用全部宽度进行间距排列，除了最后一行，它们应使用自然宽度？

---

为了完成这个小故事，感谢@Michael_B的答案，以下是我实现解决方案的方式：

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

结果如下：

美丽。

- Niet the Dark Absol

---

:after { flex: 10 0 auto; } 的问题在于，如果您在最后一行中有正确的数量，它会搞乱它。只有在最后一行有悬挂项时才需要应用。 - chovy

@chovy 当条件为真时，我认为这是可以接受的。结果就像 text-align:justify 一样很酷。 - Niet the Dark Absol

Answer 1

使用flexbox，创建3或4个“虚拟”项，它们总是占据最后几个位置。

例如，用户#82当前是您的最后一条记录。

使用“visibility: hidden”属性创建假用户83、84、85。

或者，在末尾只使用一个带有“visibility: hidden”和“flex-grow: 10”的虚拟项。使用“:last-child”或“:last-of-type”伪类来定位它。

- Michael Benjamin

---

哇塞，这太棒了，如果我使用::after伪元素，它甚至还能工作。不错！ - Niet the Dark Absol

我已经在我的问题末尾添加了您的解决方案实现结果的截图，以便查看。非常感谢您提供这个想法！ - Niet the Dark Absol

作为第二种选择的扩展，这个幻像项可以是容器的伪元素。您不需要更改DOM，而且可以直接针对它进行定位，而无需使用last-child。 - vals

使用父元素的:after会忽略您之间的空格，而无法基于:last-child:nth-child(n+...)创建更多元素，因为它们会嵌套在子元素中...无论如何，使用"正确"数量的幻影元素，它也不会具有响应性... - Fanky