Html Flexbox-图像溢出而不是包装

我正在尝试制作一个Flexbox图像库，使悬停的图像得以扩展

目前，flex wrap无法正常工作，某些图像位于框外，而不是环绕

如何使图像环绕并填充空白，而不是从container div溢出

代码笔-

html

---

此外，如果当前没有图像悬停，请忽略布局。这样做的想法是，画廊将始终有一个放大的图像处于活动状态。

尝试将

弹性方向更改为
行
：

.container {
    border: solid 1px red;
    display: flex;
    max-width: 1370px;
    height: 590px;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
}

尝试将
弹性方向
更改为
行
：

.container {
    border: solid 1px red;
    display: flex;
    max-width: 1370px;
    height: 590px;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
}

在我看来，图像在悬停时需要重新排序，以避免其他图像被推到外部


img:n子对象（2n）：悬停{
顺序：2；/*此处，图像位于第二行/每列的最后一行*/
}
.集装箱{
边框：实心1px红色；
显示器：flex；
最大宽度：1370px；
高度：590px；
柔性包装：包装；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
调整内容：灵活启动；
}
img{
高度：295px；
宽度：274px；
自我校准：灵活启动；
}
img：悬停{
宽度：548px；
高度：590px；
}
在我看来，图像悬停时需要重新排序，以避免其他图像被推到外部


img:n子对象（2n）：悬停{
顺序：2；/*此处，图像位于第二行/每列的最后一行*/
}
.集装箱{
边框：实心1px红色；
显示器：flex；
最大宽度：1370px；
高度：590px；
柔性包装：包装；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
调整内容：灵活启动；
}
img{
高度：295px；
宽度：274px；
自我校准：灵活启动；
}
img：悬停{
宽度：548px；
高度：590px；
}
您可以将图像放在容器div中，使这些图像
位置：相对的
和图像
位置：绝对的
在悬停时具有不同的上/下设置，具体取决于它们是在顶行还是在底行：


.container{
边框：实心1px红色；
显示器：flex；
最大宽度：1370px；
高度：590px；
柔性包装：包装；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
调整内容：灵活启动；
}
.imgcontainer{
高度：295px；
宽度：274px；
自我校准：灵活启动；
位置：相对位置；
}
img{
宽度：100%；
高度：自动；
}
img：悬停{
宽度：548px；
高度：590px；
位置：绝对位置；
z指数：10；
}
.img容器：第n个子项（奇数）>img:悬停{
左：0；
排名：0；
}
.img容器：第n个子对象（偶数）>img:悬停{
左：0；
底部：0；
}
您可以将图像放在容器div中，使这些图像
位置：相对的
和图像
位置：绝对的
在悬停时具有不同的上/下设置，具体取决于它们是在顶行还是在底行：


.container{
边框：实心1px红色；
显示器：flex；
最大宽度：1370px；
高度：590px；
柔性包装：包装；
弯曲方向：立柱；
调整内容：灵活启动；
调整项目：灵活启动；
调整内容：灵活启动；
}
.imgcontainer{
高度：295px；
宽度：274px；
自我校准：灵活启动；
位置：相对位置；
}
img{
宽度：100%；
高度：自动；
}
img：悬停{
宽度：548px；
高度：590px；
位置：绝对位置；
z指数：10；
}
.img容器：第n个子项（奇数）>img:悬停{
左：0；
排名：0；
}
.img容器：第n个子对象（偶数）>img:悬停{
左：0；
底部：0；
}

我尝试过这个方法，如果我将其更改为两行，则两行之间会有一个空白。有没有办法删除此项？我只需将
列
更改为
行
，代码笔上的行之间就没有空格。您也可以尝试将
flex
属性添加到图像中。我已经尝试过了，如果我将其更改为两行，则两行之间会有一个空白。有没有办法删除此项？我只需将
列
更改为
行
，代码笔上的行之间就没有空格。您还可以尝试将
flex
属性添加到imageYes！这太棒了！谢谢你的解释。是的！这太棒了！谢谢你的解释。
.container {
    border: solid 1px red;
    display: flex;
    max-width: 1370px;
    height: 590px;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: flex-start;
}