Flex 布局

推荐网址
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

例子

<template>
    <view>
        <view class="box">
            <view class="item" v-for="(item,index) in 43" >
                <image src="../../static/logo.png" mode="" style="height: 20px;width: 20px;display: block;"></image>
                <view class="">
                    <text style="text-align: center;background-color: #007AFF;">{{index}}</text>
                </view>
                
                
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
        
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .item{
        /* margin: 10px; */
        background-color: #4CD964;height: 120px;
        border: #000000;
        border-width: 0.5px;
        border-style: solid;
        width: 32.8%;
        display:flex;
        flex-flow: column  wrap;
        justify-content: center;
        align-items: center;
    }
    .box{
        
        display: flex;
        /* flex-direction: row;
        flex-wrap: wrap; */
        flex-flow: row  wrap;
        justify-content: flex-start;
    }
</style>