flex弹性盒布局怎样实现元素左对齐的效果？-群英

上一篇：css遮罩层镂空效果怎样做？教你四种方法下一篇：怎么把元素居中在网页？有什么方法？

这篇文章给大家分享的是关于flex弹性盒布局的内容，下文实现的效果是元素左对齐，也就是八张图的九宫格，最后一行要实现左对齐的效果，那么具体怎样做呢？下面我们详细的了解看看。

使用flex布局，如果是九宫格的话正好可以平分，如图

如果是我们只需要八块，如图

但是我们想让最后一块左对齐，依次排列，需要在元素的父级增加伪元素after，如图

<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;
}

关于flex弹性盒布局实现元素左对齐的内容就介绍到这，上述实例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多大家可以关注其它的相关文章。

文本转载自脚本之家

标签： flex弹性盒布局

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：css遮罩层镂空效果怎样做？教你四种方法下一篇：怎么把元素居中在网页？有什么方法？