Wie richtet man flexible Elemente in der letzten Reihe mit unvorhersehbaren Breiten perfekt aus?

So passen Sie die Größe und Ausrichtung von Flex-Elementen in der letzten Zeile perfekt an

Wenn Sie mit einer Liste von Flex-Elementen arbeiten, kann es vor allem bei der Ausrichtung am rechten Rand zu Inkonsistenzen kommen wenn die Elementbreiten unvorhersehbar oder dynamisch sind. Während feste Breiten oder display:table-Techniken möglicherweise keine zufriedenstellenden Ergebnisse liefern, sollten Sie den folgenden Ansatz mit Flexbox für eine präzise Größen- und Ausrichtungssteuerung in Betracht ziehen:

Lösung mit Flexbox:

1. Stellen Sie den übergeordneten Container so ein, dass er Folgendes anzeigt: flex; und Flex-Wrap: Wrap; um mehrere Zeilen zu ermöglichen.
2. Flex anwenden: 1 0 auto; zu den Flex-Elementen, um sie flexibel zu machen und bei Bedarf zu verkleinern.

Wenn dies jedoch dazu führt, dass die letzte Reihe zu weit gedehnt wird, können Sie die folgende Problemumgehung implementieren:

Phantom-Item-Trick:

Um ein Justify-Align-ähnliches Verhalten zu erreichen, sollten Sie „Phantom“-Flex-Items erstellen, die immer die letzten Slots belegen. Dies kann durch Hinzufügen des folgenden Codes zum übergeordneten Container erfolgen:

.parent-container:after {
    content: '';
    flex: 10 0 auto;
}

Dieses Phantomelement passt seine Breite automatisch an, um den verbleibenden Platz in der letzten Zeile auszufüllen und sicherzustellen, dass die echten Flex-Elemente ihr natürliches Aussehen behalten Breiten.

Implementierungsbeispiel:

Im angegebenen Beispiel können Sie die Lösung implementieren als folgt:

.userlist {
    display: flex;
    flex-wrap: wrap;
}

.userlist:after {
    content: '';
    flex: 10 0 auto;
}

Dadurch wird ein einzelnes Phantomelement erstellt, das immer den letzten Platz im .userlist-Container einnimmt, was zu dem gewünschten Abstand und der gewünschten Ausrichtung führt.

Das obige ist der detaillierte Inhalt vonWie richtet man flexible Elemente in der letzten Reihe mit unvorhersehbaren Breiten perfekt aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!