Uniapp applet Flex layout V-for 4 column show

Note: The image resources of this project come from the back-end interface, so v-for is used.

Keywords: uniapp applet flex layout v-for 4-column display adaptive

< view style="display: flex; flex-direction: row;flex-wrap: wrap;margin: 0 5%;">

　　<view  style="width: 25%;margin-bottom: 16upx;" v-for ='(items,indexs) in item.tags' :key ='indexs'>

　　　　<view >

　　　　　　<image  :src="items.imageUrl" style="width: 40px;height: 40px;margin: 0 25%;" >image>

　　　　　　<view  style="text-align: center;font-size: 10px;font-family: Arial;">

　　　　　　　　{{items.name}}

　　　　　　view>

　　　　view>

　　view>
view>

<view style="display: flex; flex- direction: row;flex-wrap: wrap;margin: 0 5%;">

　　<view  style="width: 25%;margin-bottom: 16upx;" v-for ='(items,indexs) in item.tags' :key ='indexs'>

　　　　<view >

　　　　　　<image  :src="items.imageUrl" style="width: 40px;height: 40px;margin: 0 25%;" >image>

　　　　　　<view  style="text-align: center;font-size: 10px;font-family: Arial;">

　　　　　　　　{{items.name}}

　　　　　　view>

　　　　view>

　　view>
view>