vue根据盒大小自适应蛇形布局

<template>
    <div style="width: 100%;">
        <div>
            <div style="font-size: 16px;">
                <div><b>xxxx</b></div>
                <div style="width: 100%;display: flex;margin: 12px 0;">
                    <div class="serpentine_flex" v-for="(item, index) in oneArr"     
                         :key="index">
                            <div class="serpentine_flex serpentine_border">
                                <check_circle v-if="index !== oneArr.length - 1"> 
                                </check_circle>
                                <error_circle v-if="index == oneArr.length - 1"> 
                                </error_circle>
                                <div style="margin-left: 12px;">
                                    <p class="serpentine_p_top">{{ item }} xxxxx 
                                    </p>
                                    <p class="serpentine_p_bot">2021/06/01</p>
                                </div>
                            </div>
                        <div v-if="index !== oneArr.length - 1" class="serpentine_flex"
                            style="height: 60px;justify-content: center;margin: 0 8px;">
                            <chevron_right></chevron_right>
                        </div>
                    </div>
                </div>
            </div>
            <div style="font-size: 16px;margin-top: 16px;" 
                :style="{ 'width': maxLen * 264 - 41 + 'px' }"
                v-for="(splitArr, splitins) in collectionArr" :key="splitins">
                <div><b>{{splitArr.title}}</b></div>
                <div v-for="(items, indexs) in splitArr.splittingArr" :key="indexs">
                    <div :style="{width: '100%',display: 'flex',
                margin: '12px 0',flexDirection:(indexs + 1) % 2 == 0 ? 'row-reverse' : 
                       'row'} ">
                        <div v-for="(val, i) in items" :key="i">
                            <div :class="{ 
           'serpentine_flex': i !== items.length - 1 && (indexs + 1) % 2 !== 0,
      'serpentine_flex_warp' : i !== items.length - 1 && (indexs + 1) % 2 == 0}">
                                    <div class="serpentine_flex serpentine_border">
                  <check_circle v-show="i < 3 && (indexs + 1) % 2 !== 0"></check_circle>
                                        <error_circle v-show="i == 3"></error_circle>
                     <time_filled v-show="(indexs + 1) % 2 == 0 || i > 3"></time_filled>
                                        <div style="margin-left: 12px;">
                                            <p class="serpentine_p_top">{{ val }} xxx</p>
                                            <p class="serpentine_p_bot">2021/06/01</p>
                                        </div>
                                    </div>
                                <div v-if="i !== items.length - 1" 
                                    class="serpentine_flex"
                                    style="height: 60px;justify-content: center;margin: 0 
                                     8px;width: 25px;">
                                    <chevron_right v-show="(indexs + 1) % 2 !== 0"> 
                                    </chevron_right>
                                    <chevron_left v-show="(indexs + 1) % 2 == 0"> 
                                    </chevron_left>
                                </div>
                                <div v-if="i == items.length - 1 && indexs !== 
                                     splitArr.splittingArr.length - 1"
                                    class="serpentine_flex" 
           style="height: 30px;justify-content: center;margin-top: 12px;">
                                    <chevron_bottom></chevron_bottom>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="jsx">
import chevron_right from '@/assets/chevron_right.svg'//箭头朝右
import check_circle from '@/assets/check_circle.svg'//盒子的状态图
import error_circle from '@/assets/error_circle.svg'
import time_filled from '@/assets/time_filled.svg'
import chevron_left from '@/assets/chevron_left.svg'//箭头朝左
import chevron_bottom from '@/assets/chevron_bottom.svg'//箭头朝下
export default {
    components: {
        chevron_right,
        check_circle,
        error_circle,
        time_filled,
        chevron_left,
        chevron_bottom,
    },
    data() {
        return {
            oneArr: ['01', '02'],
            twoArr: ['03', '04', '05', '06'],
            threeArr: ['07', '08', '09', '10', '11'],
            fourArr: ['12', '13', '14', '15', '16', '17', '18'],
            fiveArr: ['19', '20', '21', '22', '23', '24', '25'],
            collectionArr: [],
            maxLen: 0 // 设定一行多少个
        }
    },
    mounted() {
            this.maxLen = 4 //默认为4，可以获取dom元素宽度除以264动态设定每行多少个
            this.twoArr = this.splittingArr(this.twoArr, this.twoArr.length)
            this.threeArr = this.splittingArr(this.threeArr, this.threeArr.length)
            this.fourArr = this.splittingArr(this.fourArr, this.fourArr.length)
            this.fiveArr = this.splittingArr(this.fiveArr, this.fiveArr.length)
            this.collectionArr = [
                { splittingArr: this.twoArr,title:'xxx' }, 
                { splittingArr: this.threeArr,title:'xxx' }, 
                { splittingArr: this.fourArr,title:'xxx' }, 
                { splittingArr: this.fiveArr,title:'xxxx' }]
    },
    methods: {
        // 将一维数组转二维
        splittingArr(arr, len) {
            let Num = len % this.maxLen === 0 ? len / this.maxLen : Math.floor((len / this.maxLen) + 1)
            let res = []
            for (let i = 0; i < Num; i++) {
                let newArr = arr.slice(i * this.maxLen, i * this.maxLen + Number(this.maxLen))
                res.push(newArr)
            }
            return res
        }
    }
}
</script>
  
<style lang="less" scoped>
.serpentine_p_top {
    font-size: 14px;
    width: 150px;
    color: var(--text-icon-font-gy-190-primary, rgba(0, 0, 0, 0.90));
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.serpentine_p_bot {
    color: var(--text-icon-font-gy-260-secondary, rgba(0, 0, 0, 0.60));
    font-size: 14px;
}

.serpentine_border {
    height: 60px;
    width: 223px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 0 16px;
}

.serpentine_flex {
    display: flex;
    align-items: center;
    justify-content: start;
}

.serpentine_flex_warp {
    display: flex;
    flex-direction: row-reverse;
}
</style>
  

最后实现效果图

一行四个：

一行三个：