Html 如何修复flexbox中的图像以包裹2x2？并更正悬停选项？

这是我的两个FlexBox，一个用于文本，另一个用于类别链接。我试着把分类图片按2乘2的顺序排列。我尝试使用行换行，并将内容居中，但没有成功。我也使用了各种方法使用容器，但它总是以1 x 4结束。。。此外，我试图将悬停选项完全融入图像，但不知何故，悬停背景图像与图像不完全匹配，尽管其高度和宽度设置为100%
如何解决这些问题

.flex容器{
显示器：flex；
证明内容：中心；
弯曲方向：行；
宽度：800px；
}
.flex容器>div{
利润率：10px；
填充：20px；
字体大小：20px；
文本对齐：居中；
柔性流：行换行；
}
.一{
flex:1自动；
}
.二{
flex:1自动；
}
第二分区a>img{
填充：10px；
利润率：10px；
}
a{
文字装饰：无；
}
h1{
显示：块；
字体大小：1.3em；
利润率：0.67em0；
字体大小：粗体；
}
氢{
显示：块；
字号：0.8em；
保证金：0.83em0；
字体大小：粗体；
}
.集装箱{
位置：相对位置；
宽度：50%；
}
.形象{
显示：块；
宽度：200%；
高度：自动；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景颜色：darkorchid；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：黑色；
字号：18px；
位置：绝对位置；
最高：30%；
左：100%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
文本对齐：居中；
}

欢迎来到美味书店，

在那里你可以找到这么多美味的食物！
作为一家专业书店，我们有很多烹饪书籍
节日特色菜、素食、甜点和文化美食

分类购物

我已经用flex容器包装了您的盒子，并更改了一些关于盒子宽度及其内容的css。还将

width:100%

添加到您的

.flex容器中


.flex容器{
显示器：flex；
证明内容：中心；
弯曲方向：行；
宽度：100%；
}
.flex容器>div{
利润率：10px；
填充：20px；
字体大小：20px；
文本对齐：居中；
柔性流：行换行；
宽度：500%；
}
.一{
flex:1自动；
}
.二{
flex:1自动；
}
a{
文字装饰：无；
}
h1{
显示：块；
字体大小：1.3em；
利润率：0.67em0；
字体大小：粗体；
}
氢{
显示：块；
字号：0.8em；
保证金：0.83em0；
字体大小：粗体；
}
.集装箱{
位置：相对位置；
宽度：计算（50%-20px）；
利润率：10px；
}
.形象{
显示：块；
宽度：100%；
身高：100%；
最小高度：75px；
}
.覆盖{
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
身高：100%；
宽度：100%；
不透明度：0；
过渡：放松；
背景颜色：darkorchid；
最小高度：75px；
}
.container:悬停。覆盖{
不透明度：1；
}
.文本{
颜色：黑色；
字号：18px；
位置：相对位置；
文本对齐：居中；
填充：10px；
}
.图像容器{
显示器：flex；
柔性包装：包装；
}

欢迎来到美味书店，

在那里你可以找到这么多美味的食物！
作为一家专业书店，我们有很多烹饪书籍
节日特色菜、素食、甜点和文化美食

分类购物