flex布局多行两端对齐尾行排列问题。

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);

希望对学习的小伙伴有帮助。谢点赞~~

你可能感兴趣的:(flex布局多行两端对齐尾行排列问题。)