flex布局时justify-content:space-around最后一个不对齐的解决方法（css,less）

编程知识更新时间:2023-04-05 05:58:19

当使用flex弹性布局时，设置属性justify-content:space-around变成以下效果，但是我希望最后一行也是左对齐的。

解决方法：在设置justify-content:space-around的父节点加上after伪类

1.css

.father{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
 }
.father:after{
   content: '';
   width: 30%;
   border:1px solid transparent;
 }

2.less

.father{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   &:after{
     content: '';
     width: 45%;
     border:1px solid transparent;
   }
}