为什么我的弹性衣物不能包装？

因此，我在它们自己的flex项div中添加了3个图像，它们都位于一个flex容器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;
} 

提前谢谢！

---

解决方案

您需要使用媒体查询来更改.flex-Item的宽度。除非您这样做，否则它们将始终占窗口的30%，因此它们永远不会被包裹。

我包含了一个用一些库存图像替换您的图像的示例，并包含了一个媒体查询以使其以600px换行。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

  /* 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>