这篇文章给大家分享的是关于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弹性盒布局实现元素左对齐的内容就介绍到这,上述实例具有一定的借鉴价值,感兴趣的朋友可以参考,希望能对大家有帮助,想要了解更多大家可以关注其它的相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理