Question

由于某些原因，我无法包装这些图像。它们溢出了我为容器设定的宽度点。不知道我是否通过在每个图像下放置段落来做错什么，并且正在影响它吗？

要包装图像，所以我可以在顶部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>

Answer 1

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

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

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

现在，如果您希望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的方法！

Answer 2

因此，您需要在第一行中包含三个项目，在下面的行中包含两个项目：

使用flexbox时，您需要为图像及其描述提供一个包装器（此处使用figure包装图像和描述）
您还应该在 flex容器而不是 flex项

flex-wrap: wrap

现在您可以将flex-basis或width（例如flex-basis: 33.33%）用于包装弹性盒，使每行有3个项目

请参见下面的演示，内嵌评论：

.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个项目，以下答案可能会为您提供更多信息：

使用Flexbox打包图像时遇到问题

2 个答案: