码迷,mamicode.com
首页 > 其他好文 > 详细

flex布局一行三列,最后一行不足自动向前排实现

时间:2021-06-24 18:16:06      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:col   type   justify   code   none   动向   isp   item   移动端   

 

 

一行三列循环自适应,是移动端常见的布局

当使用display flex justify-content: space-between;最后一行只有两个时候,会出现分居两端,我们此时需要把最后一行改为向前布局

我的解决方案如下:

<div>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item">1</p>
  <p class="item"></p> // 在最后一项添加一个空块
</div>

然后css

 

        .field-item:nth-last-of-type(1):nth-of-type(3n+1) {
          display: none;
        }

  如果有更好的,也欢迎给出

flex布局一行三列,最后一行不足自动向前排实现

标签:col   type   justify   code   none   动向   isp   item   移动端   

原文地址:https://www.cnblogs.com/lyz1991/p/14926382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!