Dimensionierung und Ausrichtung der Flex-Elemente in der letzten Reihe

Nehmen wir an, ich habe eine Liste von Benutzern, und jedem Benutzer ist eine Nummer angehängt. Jeder Benutzer ist wie folgt aufgelistet:

Sie sind alle mit:

Hier ist ein Beispiel dafür:

Okay, das sieht gut aus, die Liste der Benutzer kann ziemlich lang werden, deshalb ist hier die Kompaktheit wichtig. Mein Problem ist, dass diese rechte Kante schrecklich widersprüchlich ist, also frage ich mich, ob es irgendeinen Weg gibt, das zu verbessern.

Mein erster Gedanke war natürlich, nur eine feste Breite auf die Spannweiten zu setzen. Die Benutzernamenbreiten sind jedoch nicht genau vorhersagbar. Sie können jemanden namens iiiii und jemanden namens WWWWW haben, aber da dies keine Monospace-Schriftart ist, erhalten Sie "iiiii" und "WWWWW", also sehr unterschiedliche Breiten. Die "maximale Breite" wäre also grundsätzlich das am weitesten erlaubte Zeichen, also W , multipliziert mit der maximalen Länge des Benutzernamens. Lass es uns versuchen ...

Ew. Ich könnte auch ein <ul> verwenden, wenn das das Ergebnis ist, das ich bekommen werde. Der nächste Gedanke war vielleicht etwas mit display:table , um die Breiten konsistent über Spalten zu halten, während sie immer noch dynamisch bleiben und - vorausgesetzt, die meisten Leute haben vernünftige Benutzernamen (* hust * ... oh hey, so entgeht man Markdown ... huh ...) - aber es neigt dazu, mit viel leerem Raum noch zu enden.

Meine derzeitige Idee ist also eine Art Justice-Alignment. Das funktioniert ganz gut für Text, oder? Aber leider macht text-align: justify in diesem Fall alle Fehler, möglicherweise weil zwischen den zu begründenden Elementen keine Leerzeichen stehen.

Mein letzter Versuch war die Verwendung von flexbox, etwas, das ich bereits im neuen Design der Website gut nutze. Mal sehen, wie es aussieht mit display: flex; flex-wrap: wrap; für den Container und flex: 1 0 auto; für die Elemente ...

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

... Hm. So nah. Was ich wirklich gerne hätte, wäre, dass die letzte Reihe von Elementen keinen Flex bekommt, der sich quer über den ganzen Weg erstreckt. Es ist okay, wenn es drei oder vier in der letzten Zeile gibt, aber zwei sehen etwas albern aus und nur einer füllt die ganze Breite und sieht lächerlich aus.

Ich schätze, dieses ganze kleine Abenteuer läuft auf eine einfache Frage hinaus:

Wie kann ich ein justice-align-like-Verhalten erreichen, bei dem die Elemente die volle Breite des Containers nutzen, außer in der letzten Zeile, in der sie ihre natürliche Breite verwenden sollen?

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

Und das Ergebnis:

Schön.