Implementierungsidee zur Linksausrichtung der letzten Zeile des Flexbox-Layouts

Wenn es sich bei der Verwendung des Flex-Layouts um ein Neun-Quadrat-Raster handelt, kann es gleichmäßig aufgeteilt werden, wie in der Abbildung gezeigt

Wenn wir nur acht Stücke benötigen, wie in der Abbildung gezeigt,

Wenn wir jedoch möchten, dass der letzte Block linksbündig ausgerichtet und in der richtigen Reihenfolge angeordnet wird, müssen wir dem übergeordneten Element ein Pseudoelement hinzufügen, wie in der Abbildung gezeigt.

<div Klasse="Box">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

ul{
	Anzeige: Flex;
	Flex-Wrap: Umwickeln;
	Inhalt ausrichten: Abstand dazwischen;
}
ul:nach{
	Inhalt: "";
	Breite: 32%;
}
ul li{
	Breite: 32%;
	Höhe: 10vh;
	Rand unten: 1vh;
	Hintergrund: #2fbaff;
} 

Damit ist dieser Artikel über die Implementierung der Linksausrichtung der letzten Zeile im Flexbox-Layout abgeschlossen. Weitere Inhalte zum Flexlayout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!