Prawidłowe sortowanie i wyrównywanie elementów elastycznych w ostatnim wierszu

Question

Załóżmy, że mam listę użytkowników i każdy użytkownik ma do niej przypisany jakiś numer. Każdy użytkownik znajduje się na liście tak:

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

Wszystkie są urządzone z:

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

Oto przykład z niego w akcji:

Dobra, wygląda to wszystko w porządku , lista użytkowników może stać się dość długa, więc kompaktowość jest tutaj ważna. Mój problem polega na tym, że ta prawica jest okropnie niespójna, więc zastanawiam się, czy jest jakiś sposób, by to poprawić.

Moją pierwszą myślą było oczywiście ustawienie stałej szerokości na przęśle. Jednak szerokości nazw użytkowników nie są dokładnie przewidywalne. Możesz mieć kogoś o nazwie iiiii i kogoś o nazwie WWWWW, ale ponieważ nie jest to czcionka o stałej szerokości, otrzymujesz "iiiii" i "WWWWW", bardzo wyraźnie różne szerokości. Tak więc "maksymalna szerokość" będzie w zasadzie najszerszym dozwolonym znakiem, którym jest W, pomnożona przez maksymalną długość nazwy użytkownika. Spróbujmy ...

Ew. Równie dobrze mógłbym użyć <ul>, jeśli to wynik, który otrzymam. Następną myślą było być może coś związanego z display:table, aby szerokości były spójne w kolumnach, a jednocześnie pozostały dynamiczne i - zakładając, że większość ludzi ma rozsądne nazwy użytkownika (* kaszel * ... och, hej, więc w ten sposób uciekasz z Markdown ... huh. ..) - ale zwykle kończy się z dużo pustej przestrzeni.

Więc moim obecnym pomysłem jest pewnego rodzaju wyrównanie. To działa całkiem dobrze dla tekstu, prawda? Ale, niestety, text-align: justify precyzyjnie dręczy wszystkie w tym przypadku, prawdopodobnie dlatego, że nie ma spacji między elementami, które mają być uzasadnione.

Moja ostatnia próba polegała na użyciu Flexboksa, czegoś, z czego już korzystam, aby uzyskać dobry efekt w nowym projekcie witryny. Zobaczmy, jak to wygląda z display: flex; flex-wrap: wrap; na pojemniku i flex: 1 0 auto; na elementach ...

Huh, że nie wygląda tak źle. Nie jest tak źle w al

... Hm. Tak blisko. Naprawdę chciałbym, aby ostatnia linia elementów nie rozciągnęła się na całej długości. Jest w porządku, gdy na ostatniej linii są trzy lub cztery, ale dwa wyglądają nieco głupio i tylko jeden wypełnia całą szerokość i wygląda śmiesznie.

Więc myślę, że cała ta mała przygoda sprowadza się do jednego prostego pytania:

Jak mogę osiągnąć uzasadniać-align podobnego zachowania, w których elementy są rozmieszczone, aby korzystać z pełnej szerokości pojemnika, z wyjątkiem ostatnia linia, w której powinny używać swojej naturalnej szerokości?

---

Aby wykonać tę małą historię, dzięki użytkownika @ Michael_B odpowiedź, oto jak I zostały wdrożone rozwiązanie:

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

a wynik:

Piękna .

Answer 1

Za pomocą Flexbox utwórz 3 lub 4 "fantomowe" przedmioty, które zawsze zajmują ostatnie sloty.

Na przykład użytkownik # 82 jest obecnie twoim ostatnim wpisem.

Twórz fałszywych użytkowników 83, 84, 85 z visibility: hidden.

Możesz także wypróbować tylko jeden fantomowy element na końcu z visibility: hidden i flex-grow: 10. Celuj w niego przy pomocy pseudoklasii :last-child lub :last-of-type.