无法使用 flexbox 包装图像
发布于2021-10-22 02:08 阅读(203) 评论(0) 点赞(30) 收藏(0)
出于某种原因，我无法将这些图像包装起来。它们溢出了我为容器制作的宽度点。不确定我在每张图片下放置段落是否做错了什么，这会影响它吗？
为了包装图像，所以我可以在顶部有 3 个，在 3 个的正下方有 2 个，每个标题都在图像正下方居中。
.block2 {
background-color: black;
width: 100%;
}
.pics {
display: flex;
}
.pics img {
height: 200px;
width: 300px;
margin: 20px;
flex-shrink: 0;
justify-content: center;
flex-wrap: wrap;
}
.pics p {
flex-wrap: wrap;
}<div class="block2">
<div class="text2">
<h2>Tea of the Month</h2>
<h1>What's Steeping at The Tea Cozy?</h1>
</div>
<div class="pics">
<img src="images/img-berryblitz.jpg" alt="berryblitz">
<p>Fall Berry Blitz Tea</p>
<img src="images/img-spiced-rum.jpg" alt="spicedrum">
<p>Spiced Rum Tea</p>
<img src="images/img-donut.jpg" alt="donut">
<p>Seasonal Donuts</p>
<img src="images/img-myrtle-ave.jpg" alt="myrtle">
<p>Myrtle Ave Tea</p>
<img src="images/img-bedford-bizarre.jpg" alt="bedford">
<p>Bedford Bizarre Tea</p>
</div>
</div>解决方案
flex 的基本思想是有一个 flex 容器，在这个容器内是 flex 项目。
默认情况下，弹性容器将始终尝试将其所有项目放入一行。这就是您的内容现在正在发生的事情。您的所有img和 p元素都是 flex 容器的直接子元素，因此将它们放在一行中。
如果您希望它们换行到第二行，您可以flex-wrap: wrap;在 flex 容器的 ( .pics) CSS 中进行设置。这将开始包装您的元素。但是，这仍然不会导致您想要的行为。
现在，每个imgandp都是 flex 容器的直接子级，如果您希望 animg和 ap在 flex 容器内一起移动，则需要将它们组合在一起，可能像 a 一样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！
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/206710/66835f46250b9fea833a/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力