为什么我的弹性物品没有包装？

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;
} 

提前致谢！

Answer 1

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

\n\n

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

\n\n

\r\n

\r\n

  /* Flexbox */\r\n\r\n.intro .flex-container {\r\n  width: 100%;\r\n  display: flex;\r\n    flex-direction: row;\r\n    justify-content: center;\r\n    flex-wrap: wrap;\r\n}\r\n\r\n.intro .flex-item {\r\n  width: 30%;\r\n  flex-direction: column;\r\n}\r\n\r\n.intro .img-fluid {\r\n  width: 90%;\r\n  padding: 2rem 0rem 2rem 0rem;\r\n} \r\n\r\n@media screen and (max-width:600px) {\r\n  .intro .flex-item {\r\n    width:50%;\r\n  }\r\n}

\r\n

<div class="intro">\r\n    <section id="intro-box">\r\n      <h2>In a nutshell</h2>\r\n      <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\r\n        in the island about 3,600 years ago \xe2\x80\x93 the Minoan eruption, it occurred at the height of the Minoan civilization.</p>\r\n      <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\r\n        beaches.\r\n      </p>\r\n      <div class="flex-container">\r\n\r\n        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>\r\n\r\n        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>\r\n\r\n        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>\r\n      </div>\r\n    </section>\r\n  </div>

\r\n

\r\n

\r\n

\n