flex布局写一行4个，超出换行

 flex布局 一行4个内容，超出换行，宽度固定25%

主要是这行：    flex-wrap: wrap;

页面展示：6个的时候

2个的时候

图标我随便写的，用的vant的icon组件

<template>
    <div>
        <div class="li-box">
            <div class="li-item" v-for="(item,index) in liData" :key="index">
                <van-icon :name="item.icon" />
                <span>{{item.value}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            liData: [
                {
                    icon: 'location-o',
                    value: '定位'
                },
                {
                    icon: 'friends-o',
                    value: '好友'
                },
                {
                    icon: 'like-o',
                    value: '收藏'
                },
                {
                    icon: 'phone-o',
                    value: '电话'
                },
                {
                    icon: 'point-gift-o',
                    value: '礼品'
                },
                {
                    icon: 'cart-o',
                    value: '购物车'
                },
            ]
        }
    }
};
</script>
<style scoped lang='scss'>
.li-box{
    display: flex;
    flex-wrap: wrap; // 换行
    .li-item{
        display: inline-block;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding: 10px;
        width: 25%;
    }
}
</style>