flex布局排列的样式

jsBugYao

已于 2022-11-20 16:45:21 修改

阅读量93

点赞数

文章标签： css 前端 html

于 2022-11-20 16:43:33 首次发布

本文链接：https://blog.csdn.net/qq_53244180/article/details/127950774

版权

flex排列布局中尾排不够与上一排的数量相等时，但又采用了justify-content: center;。就会造成排列的混乱，怎么解决这个问题呢

.recharge .recharge-main .recharge-money .mon-bot {

    display: flex;
    margin-top: 30rpx;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
    
}

.recharge .recharge-main .recharge-money .mon-bot .money {
    flex-basis: 30%;
    /* box-sizing: border-box; */
    margin-bottom: 10px;
    border: 2px solid #dcdde1;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    height: 20px;
    justify-content: center;
    
}

//直接在使用了justify-content：center中写margin-right: 34%（百分比是根据自己的效果来调整的）就可以解决了

.recharge .recharge-main .recharge-money .mon-bot .money:last-child:nth-child(3n-1){
    margin-right: 34%;
}