flex布局自动换行并解决最后一行对齐
实现效果:
html代码(父级容器里面有5个子级盒子)
css实现对齐效果:
.flex-wrp {display: flex;justify-content: space-between;flex-wrap: wrap;padding: 0 16rpx;box-sizing: border-box;}/* 实现最后一行对齐 */.flex-wrp:after{content: "";width: 180rpx;height: 0;visibility: hidden;}.flex-item {display: flex;flex-direction: column;width: 180rpx;height: 180rpx;margin-bottom: 30rpx;overflow: hidden;padding-top: 30rpx;text-align: center;box-sizing: border-box;border-radius: 25rpx;border: 1px solid #eee;/* box-shadow: 0px 6px 10px rgb(54, 168, 255, 0.16); */}
划重点:
1.flex-wrp:after样式的宽度和子级盒子的宽度一致
2.在最后一行添加了一个伪类子级盒子并隐藏掉,使得九宫格盒子保持对齐