Html 无法使用flexbox包装图像

由于某些原因，我无法将这些图像包装起来。它们溢出超过了我为容器做的宽度。不确定我是否在每张图片下放置段落是做错了什么，这会影响它吗

为了让图片包装，我可以在上面有3个，在下面有2个，每个标题都在图片的正下方居中

.block2{
背景色：黑色；
宽度：100%；
}
.图片{
显示器：flex；
}
.pics img{
高度：200px；
宽度：300px；
利润率：20px；
弹性收缩：0；
证明内容：中心；
柔性包装：包装；
}
.pics p{
柔性包装：包装；
}

月茶
茶壶里泡的是什么？
秋莓闪电茶

五香朗姆酒茶

时令甜甜圈

桃金娘大街茶

贝德福德奇异茶

flex的基本思想是有一个flex容器，容器内是flex项目

默认情况下，flex容器将始终尝试将其所有项目放在一行中。这就是你的内容现在发生的事情。您的所有

img

和

p

元素都是flex容器的直接子元素，因此它将它们安装在一行上

如果希望它们换行到第二行，可以设置

flex wrap:wrap在flex容器的（
.pics
）CSS中。这将开始包装您的元素。然而，这仍然不会导致您想要的行为

现在，每个
img
和
p
都是flex容器的直接子对象，如果希望
img
和
p
在flex容器中一起移动，则需要将它们分组，可能是以类似
div
的方式

 <div class="pics">
  <div class="pic">
    <img src="images/img-berryblitz.jpg" alt="berryblitz">
    <p>Fall Berry Blitz Tea</p>
  </div>
   ...
<div>


秋莓闪电茶

...

现在，至少段落和图像将在一起。现在，您可以为每个项目设置任何其他样式，例如在项目上居中（
.pic
）

我建议查看flex box指南以了解更多详细信息。希望这能引导您朝着正确的方向前进，但也有许多其他方法可以利用flex
 因此您需要在第一行中有三项，在下一行中有两项：


使用flexbox，您需要为图像和描述创建一个包装器（使用
图
在此处包装图像和描述）

另外，您应该在flex容器上而不是flex项目上提供
flex wrap:wrap

现在，您可以使用
flex-basis
或
width
（比如
flex-basis:33.33%
）使包装flexbox每行有3个项目


请参阅下面的演示，并附带注释：


.block2{
背景色：黑色；
宽度：100%；
}
.图片{
显示器：flex；
柔性包装：包装；/*包装柔性包装盒*/
}
.图片{
边距：0；/*重置图形的默认边距*/
边距：10px；/*弹性项目之间的间距*/
弹性基础：计算（33.33%-20px）；/*一行3项-调整每侧10px的裕度*/
}
.pics img{
显示：块；
高度：100px；/*每行高度*/
宽度：100%；
对象适合度：封面；/*适合作为封面，保持纵横比*/
}
菲卡普顿{
颜色：#fff；
}

月茶
茶壶里泡的是什么？
秋莓闪电茶
五香朗姆酒茶
时令甜甜圈
桃金娘大街茶
贝德福德奇异茶
尝试添加
flex wrap:wrap
直接在你的
.pics
类中。我可能会补充说，如果这不能解决你的问题，你能更具体地说明它的性质吗？我在小提琴上试着，但是图像没有出现，所以我看不到它们的具体排列。