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％，所以它们永远不会包裹。

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

＆＃13;

     using(MySqlConnection con = new MySqlConnection(connstring))
     {
     con.Open();
     MySqlCommand com = new MySqlCommand("Select * FROM table1, table2, 
     table3", con)
     //I removed my code here because it doesn't making any sense due to the  
     fact. I'm not sure with my MySqlCommand.
     con.Close();
     }

＆＃13;

  /* 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%;
  }
}

＆＃13;

Answer 2

两个解决方案问题..

您可以使用媒体查询或

您可以将图片格式%更改为px或类似单位
这样浏览器就会尝试保持给定的宽度如果宽度以百分比给出，它将尝试减小或增加图像的大小，因此没有空间用于包装

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

2 个答案: