Wie kann ich mit „justify-content: space-between' einen gleichmäßigen Abstand in der letzten Zeile eines Flexbox-Rasters sicherstellen?

Flex-Box: Ausrichten der letzten Zeile eines Rasters

In einem Flex-Box-Container mit Flex-Flow: Zeilenumbruch; und justify-content: space-between; werden die Elemente der letzten Zeile möglicherweise nicht richtig ausgerichtet. In diesem Artikel wird eine einfache Lösung untersucht, um die letzte Zeile an den anderen Zeilen auszurichten und dabei den gewünschten Abstand beizubehalten.

Die Lösung nutzt das Pseudoelement ::after, um den verbleibenden Platz im Container automatisch zu füllen. Durch die Zuweisung von flex: auto; bis ::after füllt es den freien Platz ohne zusätzlichen Inhalt im HTML.

.grid {<br> 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 Ansatz bietet eine saubere und unkomplizierte Lösung, ohne dass unnötige Elemente zum HTML-Code hinzugefügt werden müssen. Schauen Sie sich die Live-Demo unter http://codepen.io/DanAndreasson/pen/ZQXLXj an, um sich von der Wirksamkeit zu überzeugen.

Das obige ist der detaillierte Inhalt vonWie kann ich mit „justify-content: space-between' einen gleichmäßigen Abstand in der letzten Zeile eines Flexbox-Rasters sicherstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!