正确调整和对齐最后一行的弹性项目 [英] Properly sizing and aligning the flex item(s) on the last row

问题描述

假设我有一个用户列表，每个用户都有一些附加的号码.每个用户的列表如下:

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

它们的样式都是:

.userlist>span {显示:内联块；填充:2px 6px；边框:1px 实心 currentColor；}

下面是它的一个例子:

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

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

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

所以我目前的想法是某种对齐对齐.这对文本很有效，对吧?但遗憾的是，text-align: justify 在这种情况下确实很糟糕，可能是因为元素之间没有空格需要对齐.

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

嗯，看起来还不错.还不错-

……嗯.很近.我真正想要的是最后一行元素不要一直拉伸.最后一行有三四个也可以，但是两个看起来有点傻，一个填满整个宽度，看起来很可笑.

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

我怎样才能实现类似 justify-align 的行为，其中元素被隔开以使用容器的整个宽度，除了在最后一行它们应该使用其自然宽度的地方?><小时>

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

.userlist:after {内容: '';弹性:10 0 自动；}

结果:

漂亮.

解决方案

使用 flexbox，创建 3 或 4 个幻影"项目，它们总是占据最后一个插槽.

因此，例如，用户 #82 当前是您的最后一个条目.

使用visibility: hidden让假用户成为83、84、85.

或者，在最后尝试一个带有 visibility: hidden 和 flex-grow: 10 的虚拟项目.使用 :last-child 或 :last-of-type 伪类来定位它.

Let's say I have a list of users, and each user has some number attached to it. Each user is listed like so:

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

They are all styled with:

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

Here's an example of it in action:

Okay, this looks all right, the list of users can get quite long so compact-ness is important here. My issue is that that right edge is horribly inconsistent, so I'm wondering if there's any way to improve that.

My first thought was, of course, just setting a fixed width on the spans. However username widths aren't exactly predictable. You can have someone called iiiii and someone called WWWWW but since this isn't a monospace font you get "iiiii" and "WWWWW", very clearly different widths there. So the "max width" would basically be the widest allowed character, which is W, multiplied by the max username length. Let's try that...

Ew. I might as well use a <ul> if that's the result I'm going to get. The next thought was maybe something involving display:table to have the widths be consistent across columns, while still remaining dynamic and - assuming most people have sensible usernames (*cough*... oh hey, so that's how you escape Markdown... huh...) - but it does tend to end up with a lot empty space still.

So my current idea is some kind of justify-alignment. That works quite well for text, right? But alas, text-align: justify does precisely bugger all in this case, possibly because there are no spaces between the elements to be justified.

My final attempt was using flexbox, something I'm already using to good effect in the site's new design. Let's see how it looks with display: flex; flex-wrap: wrap; on the container, and flex: 1 0 auto; on the elements...

Huh, that doesn't look too bad. Not too bad at al-

... Hm. So close. What I'd really like is for the last line of elements to not get flex stretched all the way across. It's okay when there's three or four on the last line, but two looks a bit silly and just one fills the whole width and looks ridiculous.

So I guess this whole little adventure boils down to one simple question:

How can I achieve justify-align-like behaviour, in which elements are spaced to use the full width of the container, except on the last line where they should use their natural width?

---

To complete this little story, thanks to @Michael_B's answer, here's how I've implemented the solution:

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

And the result:

Beautiful.

解决方案

Using flexbox, create 3 or 4 "phantom" items that always occupy the last slots.

So, for instance, user #82 is currently your last entry.

Make fake users 83, 84, 85 with visibility: hidden.

Alternatively, try just one phantom item at the end with visibility: hidden and flex-grow: 10. Target it with :last-child or :last-of-type pseudo-class.

这篇关于正确调整和对齐最后一行的弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！