Wie verhindert man die Zentrierung der letzten Flex-Artikel bei Verwendung von Flexbox Wrap?

So ändern Sie den Flexbox-Wrap

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!