如何在flex弹性盒子内控制某个元素的宽度扩大方向

我们在一个弹性盒子中，对某一个元素进行查看时，为了更好的视觉效果，我们可以设置交互来实现

如实现这种类似的效果，当鼠标移入时，我们使元素的宽度进行扩大来达到这种效果，

当然为了更好的视觉体验，我们这个盒子进行了移出隐藏

但是这也出现了一个问题 当我们进行展示最后一个元素的内容时 效果确是这样的

 元素按照原来的规则进行了向右扩大 使得超出的内容被隐藏了

 好了进入正题 如何解决

在弹性盒子中     

    display: flex;
    overflow: hidden;
    justify-content: flex-start;

设置该属性 可以使得元素在主轴上的排列方式，而这也决定了元素的扩大方式 这段代码也就是让元素（左————>右）进行排列

所以我们设置

    display: flex;
    overflow: hidden;
    justify-content：flex-end

就能解决问题 

但是这有一个bug 设置之后 该盒子内的所有元素都将按照这个规则进行扩大，所以第一个元素就出现了上面的问题

 所以我们应该动态的决定何时盒子是 flex-start 何时是 flex-end 

接下来是我的代码示例

 isLast就是一个boolean 类型的值

为什么不用css控制

我最开始想的是能否使用css变量在子类中重定义来控制父类，但是这是不可行的

我经过反复的测试，这是行不通的，所以选择了js

重复测试以后出现抖动，视觉体验不好

在如上设置以后，反复在最后一个和其他元素之间反复横跳，发现出现抖动，这就是因为js处理太快，在上一个元素还没有回复如初时就已经重新设置了排列方式，从而出现了抖动

我想到的是加一个定时器来控制

let timer:number
function isLastElem(val:number){
    if ( val === props.data.list.length - 1 ) {
        timer = setInterval(() => {
            isLast.value = true
        },300)
    } else {
        timer = setInterval(() => {
            isLast.value = false
        },300)
    }
}
function isLeave(){
    if (timer) {
        clearInterval( timer )
    }
}

子元素中还需要设置动画延迟 延迟时间当然和定时器时间相同才能达到更好的效果

    &:hover{
        transition-delay: 0.3s;
        width: 341px;
    }

当然交叉轴的扩大方向的解决方式应该也是一样的，我没有测试过 理论应该行得通

这样就能完美解决啦！有什么问题欢迎指正