作者:霸气小米鱼鱼_156 | 来源:互联网 | 2022-02-28 21:55
这篇文章主要介绍了解决flex布局space-between最后一行左对齐的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
首先看代码和效果
1
2
3
4
5
6
7
8
可以看到最后一个p并没有在中间,而是在最后了
因为我们设置了justify-content为space-between,意思就是两边贴边
这时候我们可以给最外层p设置个伪元素,宽度和里面的p宽度一样就好了
只需要两行css就可以
.main:after {
content: "";
width: 100px;
}
这时候看效果
推荐教程:《CSS教程》
以上就是CSS Flex 布局 space-between 最后一行左对齐的详细内容,更多请关注其它相关文章!