In diesem reaktionsfähigen Flexbox-Szenario werden Flex-Elemente nach und nach umwickelt, wenn die Bildschirmgröße abnimmt. Um das Umhüllungsverhalten zu optimieren, untersuchen wir, wie wir die letzten Flex-Elemente von links beginnend unzentriert halten:
Ghost-Elemente implementieren:
CSS kann kann verwendet werden, um „Geister“-Elemente zu erstellen, die den verbleibenden Platz in der letzten Zeile belegen. Unter der Annahme einer potenziellen Spaltenlänge von 4 würden wir beispielsweise 3 Geisterelemente benötigen:
.card:empty {
width: 300px;
box-shadow: none;
margin: 2rem;
padding-bottom: 0;
}Pseudoelemente:
Pseudoelemente können ebenfalls verwendet werden, wodurch reduziert wird die Anzahl der benötigten Geisterelemente um 2:
::after {
content: "";
flex: 1;
}Bearbeitet Beispiel:
Hier ist eine aktualisierte Version des Codes mit diesen hinzugefügten Ghost-Elementen:
<div class="card"></div> <div class="card"></div> <div class="card"></div>
Mit diesen Verbesserungen werden die Flex-Elemente wie gewünscht umbrochen, mit den letzten beiden Elementen unzentriert und von links beginnend.
Das obige ist der detaillierte Inhalt vonWie verhindert man die Zentrierung der letzten Flex-Artikel bei Verwendung von Flexbox Wrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
