移动端flex-wrap: wrap;不起作用?

img


数据从后台来的,改变大小也不会出现换行,什么问题呢

img

.goods_list {
padding: 0 15rpx;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

        .goods_item {
            background: #fff;
            width: 355rpx;
            margin: 10rpx 0;
            padding: 15rpx;
            box-sizing: border-box;

            image {
                width: 80%;
                height: 150px;
                display: block;
                margin: auto;
            }

            .price {
                color: $shop-color;
                font-size: 36rpx;
                margin: 20rpx 0 5rpx 0;

                text:nth-child(2) {
                    color: #ccc;
                    font-size: 28rpx;
                    margin-left: 17rpx;
                    text-decoration: line-through;
                }
            }

            .name {
                font-size: 28rpx;
                line-height: 50rpx;
                padding-bottom: 15rpx;
                padding-top: 10rpx;
            }
        }
    }

你的模拟器使用414*736 还设置89%,这样不规范吧
一般默认一个固定宽度 375,设计图按照375设计

wrap是允许换行,你加了padding可能是一行排不下两个
这种使用grid会好一点

你的image宽度太大,改成48%,外面的padding给成1%,这样应该不会超了

 image {
                width: 80%;
                height: 150px;
                display: block;
                margin: auto;
            }

你这怎么这么混乱呢,你发的截图不是已经换行了吗