Javascript 我有flexbox布局onclick我想用一个更大的图片替换一些图片

Onclick我想将第一个元素的第一个图像更改为另一个更大的元素，并从flexbox中占用3个空格。我试着自己做这件事，点击2个图片隐藏，这是可以的，但我不能使更改后的图片更大，以适应flexbox

函数changeImage（）{
document.getElementById（“imgClickAndChange”）.src=“someimagepath”；
var x=document.getElementById（“imgClickAndChange1”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}

.container1{
显示器：flex；
宽度：100%；
高度：300px；
}
.货柜1组{
颜色：白色；
身高：100%；
}
.分包{
弹性：0.50%；
显示器：flex；
宽度：100%；
柔性包装：包装；
}
.次包装部{
身高：50%；
}
w-25{
弹性：0.25%；
}
.w-small{
弹性：0.33%；
}
w-double{
弹性：066%；
}

---

这是一个示例代码

使用

flex:2

而不是

flex:0 0 50%；

到

.sub-wrap

类和

flex:1

到

.w-25

类..用于技巧..

Array.from（document.querySelectorAll（'.img'））.forEach（function（el）{
el.addEventListener（'click'，函数（e）{
flexShrink（）；
e、 target.style.flexGrow='2'；
});
});
函数flexShrink（）{
Array.from（document.querySelectorAll（'.img'））.forEach（function（el）{
el.style.flexGrow='1'；
});
}

*{
框大小：边框框；
保证金：0；
填充：0；
}
#主要{
宽度：100%；
高度：100px；
边框：1px实心#C3C3；
显示器：flex；
}
.项目{
柔性生长：1；
}

img
img

添加html代码…如果我给你flexbox的示例代码…可以吗？…你会自己做的好的谢谢你的帮助我可以输入答案吗？你需要吗？是的谢谢你的帮助