Wie kann Flexbox eine gerechtfertigte Ausrichtung für Elemente mit variabler Breite in der letzten Zeile erreichen?

Flexbox beherrschen: Erzielen einer gerechtfertigten Ausrichtung für Elemente mit variabler Breite

Im Bereich Webdesign ist es oft wünschenswert, Elemente in einem auszurichten So wird der Raum optimiert und ein optisch ansprechendes Layout geschaffen. Flexbox hat sich als leistungsstarkes Werkzeug zum Erreichen dieses Ziels herausgestellt, bestimmte Szenarien können jedoch einzigartige Herausforderungen mit sich bringen.

Eine solche Herausforderung entsteht beim Umgang mit Artikeln variabler Breite, die in einem flexiblen Behälter angeordnet sind. Betrachten Sie eine Liste von Benutzern mit jeweils einem Namen und einer zugehörigen Nummer. Beim Umwickeln mit Flexbox können sich diese Elemente so weit ausdehnen, dass sie die gesamte Breite des Containers ausfüllen, wodurch unschöne Lücken in der letzten Zeile entstehen.

Das gewünschte Verhalten besteht darin, die Elemente in der letzten Zeile mit ihren natürlichen Breiten auszurichten Stellen Sie sicher, dass die Elemente in allen anderen Reihen die Breite des Containers vollständig ausnutzen. Um dies zu erreichen, kann eine Technik mit Phantomgegenständen eingesetzt werden.

Lösung: Phantomgegenstände

Der Schlüssel zur Lösung dieses Ausrichtungsproblems besteht in der Einführung von Phantomgegenständen, die das besetzen letzte Slots in der letzten Reihe. Diese Elemente werden mit „visibility:hidden“ unsichtbar gemacht, während ihre Flex-Grow-Eigenschaft sicherstellt, dass sie den verbleibenden Platz in der Zeile ausfüllen.

Implementierung

Um diese Lösung zu implementieren , kann man Phantomelemente an das Ende des Containers anhängen. Betrachtet man beispielsweise eine Liste mit 82 Benutzern, können mit dem folgenden CSS drei Phantomelemente erstellt werden:

.userlist:after {
    content: "";
    flex: 10 0 auto;
    visibility: hidden;
}

Ein alternativer Ansatz besteht darin, ein einzelnes Phantomelement mit „flex-grow: 10“ zu erstellen und es mithilfe von Folgendes anzusprechen: last-child oder :last-of-type Pseudoklassen.

Das obige ist der detaillierte Inhalt vonWie kann Flexbox eine gerechtfertigte Ausrichtung für Elemente mit variabler Breite in der letzten Zeile erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!