flex换行布局中space-between最后一行问题

1.遇到的问题

在数量不固定，每一行又需要根据父级宽度动态变化，且在一行中又要平均间距时，会出现如下情况
（例1）

（例2）

2.解决方法

(1)设置为flex-start,动态计算每一个子元素的右边距
(2)在父级宽度变化后，算出每一行子元素的个数，再减去子级总数与行个数取模后的数，得到最终需要补齐的个数

第一种方法稍微复杂点，这里不再详细说明，主要说第二种方法。

这里用到了ResizeObserver方法，可以观察某个元素高宽度及位置的变化。

const resizeObserver = new ResizeObserver(this.resizeChangeWH);
resizeObserver.observe(this.$el);

resizeChangeWH(entries){
            const childNodes = this.$el.childNodes;
            let row = 0,beforeNode=null;
            for(let i=0;i<childNodes.length;i++){
                let node = childNodes[i];
                if(!beforeNode){
                    beforeNode = node;
                    continue;
                }
                if(node.offsetTop !== beforeNode.offsetTop){
                    row = i;
                    break;
                }
                
            }
            this.repair = row>1?row - this.boxItemNum%row:0;
        }

当父级元素变化后，取得所有子元素，遍历子元素时发现某一个子元素的offsetTop与之前不一样，则证明此位置开始换行，即而得出每一行的个数

运行后的效果如下：

附Vue源码：

<template>
    <div class="box-content">
        <div class="box-item main" v-for="item in boxItemNum" :key="'main'+item"/>
        <div class="box-item repair" v-for="item in repair" :key="'repair'+item"></div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            boxItemNum:11,
            repair: 0,
        }
    },
    mounted(){
        const resizeObserver = new ResizeObserver(this.resizeChangeWH);
        resizeObserver.observe(this.$el);
    },
    methods:{
        resizeChangeWH(entries){
            const childNodes = this.$el.childNodes;
            let row = 0,beforeNode=null;
            for(let i=0;i<childNodes.length;i++){
                let node = childNodes[i];
                if(!beforeNode){
                    beforeNode = node;
                    continue;
                }
                if(node.offsetTop !== beforeNode.offsetTop){
                    row = i;
                    break;
                }
                
            }
            this.repair = row>1?row - this.boxItemNum%row:0;
        }
    }
}
</script>


<style lang="scss" scoped>
    
.box-content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-flow: wrap;

    .box-item{
        width: 256px;
        height: 144px;
        margin: 15px;

        &.main{
            background-color: #ff0000;
        }

        &.repair{
            background-color: #00ff00;
        }
    }
}
</style>