flex布局(弹性布局)盒子(列表)末尾排版出现空隙相隔过大的问题-图文式解答

先上图看看问题:
在这里插入图片描述
原本的排版是:
在这里插入图片描述
这个时候会出现两种情况:最后是两个产品或者三个产品,处理方式

<!--productsList是我的列表数组,除4取余就得到最后剩几个模块-->
:class="(productsList.length%4)==3?'three-product':''||(productsList.length%4)==2?'two-product':''"

样式代码:

  .two-product:after{
    content: '';
    width: 50%;
    border:1px solid transparent;
  }
  .three-product:after{
    content: '';
    width: 25%;
    border:1px solid transparent;
  }

结果:
在这里插入图片描述
原理就是利用css3的伪类元素,给其一个“孩子”用来占位

发布了17 篇原创文章 · 获赞 0 · 访问量 232
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 1024 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览