Wie kann ich die Breite von Flex-Elementen in der letzten Zeile ohne Dehnung ausrichten?

Flexible Elementbreiten in der letzten Zeile ausrichten

Die Herausforderung entsteht, wenn versucht wird, Elemente mit Ausnahme der letzten Zeile gleichmäßig über den Container zu verteilen . Das einfache Ausrichten der Elemente mit text-align:justify reicht nicht aus, da zwischen den Elementen keine Leerzeichen stehen. Flexbox bietet eine Lösung, aber das Standardverhalten streckt die Elemente der letzten Zeile über die gesamte Breite.

Um ein Justify-Align-ähnliches Verhalten zu erreichen, bei dem Elemente die natürliche Breite in der letzten Zeile verwenden, verwenden Sie den folgenden Ansatz:

1. Phantom-Gegenstände hinzufügen:
   Erstellen Sie mehrere „Phantom“-Gegenstände, die die letzten Plätze des Containers belegen. Diese Elemente können mit Sichtbarkeit ausgeblendet werden: ausgeblendet.

Fügen Sie beispielsweise mit Benutzer Nr. 82 als letztem Eintrag die gefälschten Benutzer 83, 84 und 85 mit Sichtbarkeit ausgeblendet hinzu.

2. Verwenden Sie einen einzigen Phantomgegenstand:
   Alternativ können Sie am Ende einen einzelnen Phantomgegenstand mit Sichtbarkeit verwenden: versteckt und flexibel wachsen: 10. Verwenden Sie die Pseudoklasse :last-child oder :last-of-type als Ziel.

Diese Methode ermöglicht es den Elementen der letzten Zeile, während der Verteilung ihre natürliche Breite beizubehalten Der verbleibende Platz wird gleichmäßig auf die Phantomelemente verteilt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Breite von Flex-Elementen in der letzten Zeile ohne Dehnung ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!