Nehmen wir an, ich habe eine Liste mit Benutzern und jedem Benutzer ist eine Nummer zugeordnet. Jeder Benutzer ist folgendermaßen aufgelistet:

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

Sie sind alle gestylt mit:

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

Hier ist ein Beispiel in Aktion:

Okay, das sieht in Ordnung aus, die Liste der Benutzer kann ziemlich lang werden, daher ist Kompaktheit hier wichtig. Mein Problem ist, dass diese rechte Kante schrecklich inkonsistent ist. Ich frage mich, ob es eine Möglichkeit gibt, dies zu verbessern.

Mein erster Gedanke war natürlich, nur eine feste Breite für die Spannweiten festzulegen. Die Breite der Benutzernamen ist jedoch nicht genau vorhersehbar. Sie können jemanden namens @ habiiiii und jemand namensWWWWW aber da es sich nicht um eine Monospace-Schriftart handelt, erhalten Sie "iiiii" und "WWWWW", sehr deutlich unterschiedliche Breiten. Die "maximale Breite" wäre also im Grunde genommen das am weitesten zulässige Zeichen, nämlich W, multipliziert mit der maximalen Länge des Benutzernamens. Lass es uns versuchen ...

Ew. Ich könnte genauso gut ein @ verwend<ul> wenn das das Ergebnis ist, werde ich bekommen. Der nächste Gedanke war vielleicht etwas mitdisplay:table um zu gewährleisten, dass die Breiten in allen Spalten gleich sind, aber dennoch dynamisch bleiben und - vorausgesetzt, die meisten Leute haben vernünftige Benutzernamen (* hust * ... oh hey, so entkommst du Markdown ... huh ...) - aber das tut es neigen dazu, immer noch viel leeren Raum zu haben.

So ist meine aktuelle Idee eine Art Justify-Alignment. Das funktioniert ganz gut für Text, oder? Aber leidertext-align: justify nervt genau in diesem Fall alles, möglicherweise weil es keine Leerzeichen zwischen den zu begründenden Elementen gibt.

Mein letzter Versuch war die Verwendung von Flexbox, die ich bereits im neuen Design der Site erfolgreich eingesetzt habe. Mal sehen, wie es mit @ aussiedisplay: flex; flex-wrap: wrap; auf dem Container undflex: 1 0 auto; auf den Elementen ...

Huh, das sieht nicht schlecht aus. Nicht schlecht bei al-

... Hm. So nah. Was ich wirklich möchte, ist, dass die letzte Reihe von Elementen nicht vollständig überdehnt wird. Es ist in Ordnung, wenn in der letzten Zeile drei oder vier stehen, aber zwei sehen ein bisschen albern aus, und nur einer füllt die gesamte Breite aus und sieht lächerlich au

So denke ich, dass dieses ganze kleine Abenteuer auf eine einfache Frage hinausläuft:

Wie kann ich ein Ausrichtungsverhalten erzielen, bei dem die Elemente so angeordnet sind, dass sie die gesamte Breite des Containers nutzen, außer in der letzten Zeile, in der sie ihre natürliche Breite verwenden sollen?

Um diese kleine Geschichte dank der Antwort von @ Michael_B zu vervollständigen, habe ich die folgende Lösung implementiert:

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

Und das Ergebnis:

Schön