flex布局 解决最后一排数量不够自动向两端排列问题

flex布局 justify-content:space-between; 解决最后一排数量不够自动向两端排列问题
flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况
在这里插入图片描述
这时,我们可以下面after伪类,解决最后一排数量不够两端分布的情况

.tem-flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify;
  }
  <!--加上after伪类,解决最后一排数量不够两端分布的情况-->
  .tem-flex:after{
    content: '';
    width: 30%;
    border:1px solid transparent;
  }
  .tem-list{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
  }

最终效果,完美解决两端对齐布局混乱的情况
在这里插入图片描述
but 我亲自后发现这个只适合三列的,四列 五列还是不行

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值