Wie kann ich das Ausdehnen der letzten Zeile in Flexbox-Layouts verhindern?

Korrekte Größe und Ausrichtung der Flex-Elemente der letzten Zeile

In einem Szenario, in dem Inline-Block-Elemente Benutzernamen und zugehörige Elemente enthalten Wenn Zahlen mit inkonsistenten rechten Kanten angezeigt werden, besteht das Ziel darin, ein konsistentes und dynamisches Ausrichtungsverhalten zu erreichen.

Flexbox bietet eine Lösung zu diesem Ausrichtungsproblem. Durch Anwenden von display: flex; Flex-Wrap: wickeln; zum Container und Flex: 1 0 auto; den Elementen können Sie ein zufriedenstellendes Ergebnis erzielen. Allerdings dehnt sich die letzte Elementreihe immer noch unnatürlich aus.

Um dieses Problem zu lösen und die unerwünschte Dehnung zu vermeiden, kann eine Technik mit „Phantom“-Elementen eingesetzt werden. Durch die Erstellung von 3 oder 4 unsichtbaren „Phantom“-Elementen, die immer die letzten Plätze belegen, bleibt die natürliche Breite der Elemente der letzten Reihe erhalten.

Alternativ können Sie ein einzelnes „Phantom“-Element mit Sichtbarkeit verwenden: versteckt und flex-grow: 10. Durch das Targeting dieses Elements mit der Pseudoklasse :last-child oder :last-of-type wird sichergestellt, dass es immer das letzte Element belegt Position.

Diese Technik erreicht effektiv ein Justify-Align-ähnliches Verhalten, sodass Elemente die Breite des Containers ausfüllen können, ohne die letzte Zeile zu überdehnen, was zu einem optisch ansprechenden Layout führt.

Das obige ist der detaillierte Inhalt vonWie kann ich das Ausdehnen der letzten Zeile in Flexbox-Layouts verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!