irpas技术客

flex布局时justify-content:space-around最后一个不对齐的解决方法(css,less)_给你六圆钱

irpas 5215

当使用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; } } 最后效果


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #Less #display #flex