100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > flex布局自动换行并解决最后一行对齐

flex布局自动换行并解决最后一行对齐

时间:2024-05-27 02:21:03

相关推荐

flex布局自动换行并解决最后一行对齐

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.在最后一行添加了一个伪类子级盒子并隐藏掉,使得九宫格盒子保持对齐

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。