Left alignment of the last line of flex elastic box layout

Time:2021-5-8

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

在这里插入图片描述

If it is, we only need eight, as shown in the picture

在这里插入图片描述

But if we want the last block to be left aligned and arranged in order, we need to add the 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;
}

在这里插入图片描述

Here is the article about how to realize left alignment in the last line of flex flexible box layout. For more information about flex flexible layout, please search previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!