为什么我的flex项目没有换行？

Question

我已经在它们自己的flex-item div中添加了3个图像，并且它们都位于一个flex-container div中，当我缩小浏览器窗口时，这些图像会按比例缩小，但它们仍然保持在一行内而不是换行成为单列。你有什么想法可以让它们换行吗？这是它的样子：

div class="intro">
    <section id="intro-box">
      <h2>In a nutshell</h2>
      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened
        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>
      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand
        beaches.
      </p>
      <div class="flex-container">
        <!--Photo from: www.santorinicrystalblue.com -->
        <div class="flex-item"><img class="img-fluid" src="media/sontorini-greece.jpg"></div>
        <!--Photo from: www.static2.traveltek.net -->
        <div class="flex-item"><img class="img-fluid" src="media/santorini-view-1.jpg"></div>
        <!--Photo from: www.mylossantorini.com-->
        <div class="flex-item"><img class="img-fluid" src="media/santorini-restaurant.jpg"></div>
      </div>
    </section>
  </div>
</main>

这是CSS样式表：

    /* Flexbox */

.intro .flex-container {
  width: 100%;
  display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.intro .flex-item {
  width: 30%;
  flex-direction: column;
}

.intro .img-fluid {
  width: 90%;
  padding: 2rem 0rem 2rem 0rem;
} 

提前感谢！

- AKL012

---

你正在告诉 flex 项目具有 width: 30%。这是父元素（flex 容器）的 30％。因此，即使父元素只有 6 像素宽，每个项目也将占用其中的 30％，并且它们永远不会换行。相反，请使用固定宽度或媒体查询。 - Michael Benjamin

Answer 1

您需要使用媒体查询来更改 .flex-item 的宽度。如果不这样做，它们将始终占窗口的30％，因此永远不会换行。

我提供了一个示例，其中我用一些库存图像替换了您的图像，并包含了一个媒体查询，在 600px 处进行换行。

  /* Flexbox */

.intro .flex-container {
  width: 100%;
  display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.intro .flex-item {
  width: 30%;
  flex-direction: column;
}

.intro .img-fluid {
  width: 90%;
  padding: 2rem 0rem 2rem 0rem;
} 

@media screen and (max-width:600px) {
  .intro .flex-item {
    width:50%;
  }
}

<div class="intro">
    <section id="intro-box">
      <h2>In a nutshell</h2>
      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened
        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>
      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand
        beaches.
      </p>
      <div class="flex-container">

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>
      </div>
    </section>
  </div>

- Joe Fitzsimmons

Answer 2

你的问题有两个解决方案：

一种是使用媒体查询；

另一种是将图片的宽度从%改为px或类似单位，这样浏览器就会尝试维持给定的宽度。如果以百分比指定宽度，则会尝试减小或增加图像大小，以便不留下空间进行换行。

- bhv