无法使用 flexbox 包装图像答案

【问题标题】：Having trouble getting images to wrap with flexbox无法使用 flexbox 包装图像
【发布时间】：2019-09-20 13:18:39
【问题描述】：

由于某种原因，我无法包装这些图像。它们溢出我为容器制作的宽度点。不确定我在每张图片下放置段落是否做错了，这会影响它吗？

为了包装图片，我可以在顶部放置 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-wrap:wrap; 直接添加到您的.pics 类中。
我可以补充一下，如果这不能解决您的问题，您能否更具体地说明它的性质？我正在用小提琴尝试它，但图像没有出现，所以我看不到它们的具体对齐方式。

标签： html css flexbox

【解决方案1】：

所以你需要在第一行有三个项目，在下一行有两个：

使用 flexbox，您需要为图像和描述开始包装（使用figure 在此处包装图像和描述），
你也应该在 flex 容器而不是 flex 项上提供flex-wrap: wrap，
现在您可以使用flex-basis 或width（比如flex-basis: 33.33%）来包装弹性框，让每行有3 个项目

查看下面的内联 cmets 演示：

.block2 {
  background-color: black;
  width: 100%;
}

.pics {
  display: flex;
  flex-wrap: wrap; /* wrapping flexbox */
}

.pics figure {
  margin: 0; /* reset default margin of figure */
  margin: 10px; /* space between flex items */
  flex-basis: calc(33.33% - 20px); /* 3 items in a row - adjust for the 10px margin on each side */
}

.pics img {
  display: block;
  height: 100px; /* height of each row */
  width: 100%;
  object-fit: cover; /* fit as cover maintaining aspect ratio */
}

figcaption {
  color: #fff;
}

<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">
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Fall Berry Blitz Tea
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Spiced Rum Tea
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Seasonal Donuts
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Myrtle Ave Tea
      </figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/200/300">
      <figcaption>
        Bedford Bizarre Tea
      </figcaption>
    </figure>
  </div>
</div>

对于 n 行中的 n 项 带有弹性框，以下答案可能会为您提供更多信息：

【讨论】：

【解决方案2】：

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

默认情况下，弹性容器总是会尝试将其所有项目放在一行中。这就是您的内容现在正在发生的事情。您的所有img 和p 元素都是flex 容器的直接子元素，因此它将它们放在一行中。

如果您希望它们换行到第二行，您可以在 flex 容器的 (.pics) CSS 中设置 flex-wrap: wrap;。这将开始包装你的元素。但是，这仍然不会导致您想要的行为。

现在，每个 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) 上为每个项目设置所需的任何其他样式，例如居中。

我建议查看this 弹性框指南以获取更多详细信息。希望这会引导您朝着正确的方向前进，但也有许多其他方法可以利用 flex！

【讨论】：