flex弹性盒布局怎样实现元素左对齐的效果？
发布时间：2022-03-02 10:06:31 所属栏目：编程 来源：互联网
导读：这篇文章给大家分享的是关于flex弹性盒布局的内容，下文实现的效果是元素左对齐，也就是八张图的九宫格，最后一行要实现左对齐的效果，那么具体怎样做呢？下面我们详细的了解看看。 使用flex布局，如果是九宫格的话正好可以平分， 如果是我们只需要八块， 但
|
这篇文章给大家分享的是关于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; } （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读