美文网首页
flex布局多行两端对齐尾行排列问题。

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

作者: Feng_Du | 来源:发表于2021-07-15 11:16 被阅读0次

    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布局多行两端对齐尾行排列问题。

          本文链接:https://www.haomeiwen.com/subject/npuppltx.html