Implementation idea of ​​left alignment of the last row of flex box layout

Using flex layout, if it is a nine-square grid, it can be divided equally, as shown in the figure

If we only need eight pieces, as shown in the figure

But if we want the last block to be left-aligned and arranged in sequence, we need to add a pseudo-element after to the parent of the element, as shown in the figure

<div class="box">
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
ul:after{
	content: "";
	width: 32%;
}
ul li{
	width: 32%;
	height: 10vh;
	margin-bottom: 1vh;
	background: #2fbaff;
} 

This concludes this article about how to implement left-alignment of the last line in flex box layout. For more flex layout content, please search previous articles on 123WORDPRESS.COM or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!