flex布局 justify-content:space-between; 解决最后一排数量不够自动向两端排列问题

flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况


如图所示排布情况

这时,我们可以下面after伪类,解决最后一排数量不够两端分布的情况

.tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
  }
  
  .tem-flex:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }

最终效果,完美解决两端对齐布局混乱的情况


在这里插入图片描述

当然,如果布局每列有4个,5个可以以此类推,举一反三

更多详细知识介绍请访问我的个人主页

你可能感兴趣的:(flex布局 justify-content:space-between; 解决最后一排数量不够自动向两端排列问题)