uni-app左右平分九宫格样式

效果图：

1.template：布局

<template>
    <view class="content">
        <view class="cp-xiangmu" v-for="item in imgs">
            <image :src="item.imgurl" class='cp_tupian' mode='widthFix'></image>
            <text class='cp-biaoti'>{{item.title}}</text>
        </view>
    </view>
</template>

2.script标签中添加测试数据

 3.最重要的是style样式

<style>
    .cp_tupian {
        width: 100%;
    }

    .cp-biaoti {
        font-size: 14px;
        color: gray;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cp-xiangmu {
        width: 50%;
        display: flex;
        padding: 3px;
        box-sizing: border-box;
        flex-direction: column;
    }

    .content {
        display: flex;
        flex-wrap: wrap;
    }
</style>