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

问题描述

假设我有一个用户列表，每个用户都有一个附加的号码。每个用户列出如下：

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

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

美丽。

解决方案

使用flexbox创建3或4个幻影项，它们总是占据最后一个位置。

最后一项。

使用显示设置：hidden 让假用户83,84,85。

或者，尝试使用 visibility：hidden 和 flex-grow：10 。使用：last-child 或：最后类型伪类别来定位

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.

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