flex布局 justify-content:space-between; 是大家常用的方法,当需要flex-wrap:wrap;时,尾行元素显示在两端总是不如意的,下面说一下解决方法。
1、当列数小于3时。
可以采用添加一个伪元素
图例
:after {
content: '';
width: 30%; //子元素宽
border: 1px solid transparent;
}
2、大于3列的情况下,使用js计算出剩余需要占位元素数量,然后尾部循环元素并添加opacity: 0;。
let placeholder =0;//占位元素数量
let n=4; //列数
list.length > n ? (placeholder = n - (list.length % n)) : (this.placeholder = n - list.length);
网友评论