正確調整和對齊最後一行上的彈性項目

比方說，我有一個用戶列表，並且每個用戶都附加了一些號碼。每個用戶列出像這樣：正確調整和對齊最後一行上的彈性項目

<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，乘以最大用戶名長度。讓我們試試...

的E w。如果這是我將要得到的結果，我不妨使用<ul>。接下來的想法可能是display:table這樣的問題，它們的寬度在各列之間保持一致，同時仍然保持動態，並且 - 假設大多數人都有明智的用戶名（*咳嗽* ...哦，嘿，這就是您如何逃脫Markdown ......呵呵。 ..） - 但它確實傾向於仍然有很多空的空間。

所以我目前的想法是某種證明對齊。這對於文本來說效果很好，對吧？但是，唉，text-align: justify確實在這種情況下完全沒有辦法，可能是因爲元素之間沒有空間可以證明。

我最後的嘗試是使用flexbox，我已經在網站的新設計中使用了這個功能。讓我們來看看它的外觀與display: flex; flex-wrap: wrap;在容器上，並flex: 1 0 auto;上的元素...

咦，這看起來並不太壞。不算太糟糕的AL-

...嗯。很近。我真正喜歡的是最後一行元素不會讓flex一直延伸。沒問題，最後一行有三到四個，但兩個看起來有點傻，只有一個填滿整個寬度，看起來很荒謬。

所以我想這整個小冒險歸結爲一個簡單的問題：

我怎樣才能做到自圓其說對齊類似的行爲，其中元件間隔使用容器的整個寬度，除了在他們應該使用自然寬度的最後一行？

要完成這個小故事，感謝@ Michael_B的答案，這裏是如何我已經實現瞭解決方案：

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

而結果：

美麗。

來源

2016-01-21 Niet the Dark Absol

'：在{flex：10 0 auto; }'如果你在最後一行有正確的號碼，它就會混亂起來。只有當你在最後一行有懸掛物品時才需要申請。 – chovy

@chovy雖然是真的，但我認爲這是可以接受的。結果就像'text-align：justify'這很酷。 –

使用flexbox，創建總是佔據最後一個槽的3或4個「幻影」項目。

因此，例如，用戶＃82當前是您的最後一個條目。

假冒用戶83,84,85與visibility: hidden。

或者，在visibility: hidden和flex-grow: 10末尾嘗試一個幻影項目。以:last-child或:last-of-type僞類爲目標。

來源

2016-01-21 17:25:26

乾淨利落的廢話，如果我使用':: after'僞元素，它甚至可以工作。太好了！ –

我已經添加了一個實現您的解決方案的結果截圖到我的問題結束，所以可以看到。非常感謝你的這個想法！ –

作爲第二種選擇的擴展，這個幻象項目可以是容器的僞項。你不需要改變DOM，你可以直接定位它，而不是使用最後一個孩子 – vals

正確調整和對齊最後一行上的彈性項目

回答

相關問題