使用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弹性布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
第一部分:基础知识 1.与:active 和 :hover这些伪类不一样,他们都是伪元素。 2....
解决方案 在父元素中加入position:relative; 子元素中加入position:absolute; ri...
页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位...
在H5页面中嵌入视频的情况是比较多件的,有时候会碰到需要自动播放的情况,之前...
最近半个月为了期末考试,可要了学渣我半瓶血啊!今天本该好好复习的,可是状态...
HTML5基于flash实现播放RTMP协议视频,具体代码如下所示: !doctype htmlhtmlhea...
filter和backdrop-filter具有一定区别: Filter不仅仅作用于当前元素,后代元素...
工作中遇到如下需求,点击输入框弹出自定义弹窗,输入框是input标签: 但是在移...
DevOps 代表开发和运营。 这是一种新的软件开发形式,彻底改变了软件产品的开发...
作者:Matt Maribojoc 译者:前端小智 来源:stackabuse 有梦想,有干货,微信搜...