flex布局 justify-content:space-between; 是大家常用的方法垄开,當(dāng)需要flex-wrap:wrap;時(shí)剃幌,尾行元素顯示在兩端總是不如意的聋涨,下面說(shuō)一下解決方法。
1负乡、當(dāng)列數(shù)小于3時(shí)牍白。
可以采用添加一個(gè)偽元素
:after {
content: '';
width: 30%; //子元素寬
border: 1px solid transparent;
}
2、大于3列的情況下抖棘,使用js計(jì)算出剩余需要占位元素?cái)?shù)量茂腥,然后尾部循環(huán)元素并添加opacity: 0;。
let placeholder =0;//占位元素?cái)?shù)量
let n=4; //列數(shù)
list.length > n ? (placeholder = n - (list.length % n)) : (this.placeholder = n - list.length);