这是wxml部分：

<view class="medicine-all">

<view class="medicine-item{{item}}" wx:for="{{medicine}}" wx:key="id">

<image src="{{item.image}}" class="medicine-image">{{item.name}}</image>

<text class="medicine-name">{{item.name}}</text>

</view>

</view>

这是js部分：

medicine:[{

id:1,

name:'龙葵',

image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583842239944&di=99dc84ff794f68a2a721e838f9b9c41a&imgtype=0&src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F22586%2F22585604.jpg'

},

{

id:2,

name:'甘草',

image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583825134482&di=f12c9eab82e063c6e86c409b0f58750f&imgtype=0&src=http%3A%2F%2Fimg.miaoshou.com%2Fproduct%2Fa%2Ff1%2Faf149c9295900a71341de2a3d48fe644.jpg'

},

{

id:3,

name:'菊花',

image:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583842268488&di=03f5fff1f484f9d6b4fd2403a821c437&imgtype=0&src=http%3A%2F%2Fimage.yuanlin.com%2FNews%2FUploadFiles%2F2015%2F10%2F19250425-899b-4e11-8228-321dee985ebd.jpg'

}

]

这是wxss部分：

.medicine-all{

display: flex;

flex-direction: row;

justify-content: space-between;

flex-wrap: wrap

}

.medicine-image{

width: 350rpx;

height: 350rpx;

}

这是目前效果：

我想让图片在上文字在下成为一个单位，这个单位再进行弹性布局，可是目前效果是这样的，请问该如何做才能达成我想要的效果？