H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】flex换行布局中space-between最后一行问题

1.遇到的问题

在数量不固定,每一行又需要根据父级宽度动态变化,且在一行中又要平均间距时,会出现如下情况
(例1)
image.png
(例2)
image.png

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与之前不一样,则证明此位置开始换行,即而得出每一行的个数

运行后的效果如下:
image.png
image.png
image.png

附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>

本文地址:H5W3 » 【前端技术】flex换行布局中space-between最后一行问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址