Wie kann ich die letzte Zeile von Elementen in einer Flexbox mit „justify-content: space-between;' ausrichten?

Elemente der letzten Zeile mit Flex-Box ausrichten

Flex-Box-Layouts sind für ihre Flexibilität bei der Anordnung von Inhalten bekannt. In einem Szenario, in dem Sie einen Flex-Box-Container mit Elementen haben, die mithilfe von Flex-Flow angeordnet sind: Zeilenumbruch; und justify-content: space-between; kann es vorkommen, dass Sie möchten, dass die Elemente in der letzten Zeile an den anderen ausgerichtet werden.

Ausrichtung mit justify-content: space-between erreichen ;

Um diese Ausrichtung zu erreichen und gleichzeitig die Verwendung von justify-content: space-between; Für anpassbare Rasterabmessungen können Sie die folgende Methode verwenden:

 display: flex;<br> flex-flow: row wrap;<br> justify-content: space-between;<br> }</p><p>.grid::after {<br> content: "";<br> flex: auto;<br>}<br>

Dieser CSS-Code fügt dem Container ein unsichtbares Element (::after) hinzu. Dieses Element nimmt den verbleibenden Platz im Behälter ein und richtet die Gegenstände in der letzten Reihe effektiv an den anderen aus, während die gewünschte Verteilung für die anderen Reihen erhalten bleibt.

Beispiel

Betrachten Sie das folgende Beispiel, bei dem das letzte Zeilenelement in der „mittleren Spalte“ ausgerichtet werden muss:

 Anzeige: flex;<br> flex-flow: row wrap;<br> justify-content: space-between;<br>}</p><p>.grid::after {<br> content: "";<br> flex: auto;<br>}</p><p>.item {<br> width: 100px;<br> Höhe: 100px;<br>Hintergrundfarbe: #ccc;<br>}<br>

Dieser Code erstellt einen Flex-Box-Container mit Artikeln, die auf mehrere Zeilen verteilt sind. Das ::after-Element stellt sicher, dass das letzte Zeilenelement an den anderen ausgerichtet ist und die Verteilung der anderen Zeilen auch dann beibehalten wird, wenn die Breite des Containers variiert.

Das obige ist der detaillierte Inhalt vonWie kann ich die letzte Zeile von Elementen in einer Flexbox mit „justify-content: space-between;' ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!