如何使这些图像块响应

Question

我在 div[=32 中有 3 个图像块（图像和描述） =] 元素。我使用了 flexbox 这样所有 3 个图块都在全屏视图中并排显示。但是当在较小的屏幕上显示时，我希望 2 个图块位于第一行，第三个图块开始新的第二行。我通过在全屏情况下给磁贴 width 33% 和 width 50% 在较小的屏幕视图中，但它不起作用主要是因为我犯了一些错误。

.container{
  display: flex;
  flex-direction: row;
}
.tile {
  width: 33%;
}
  .img {
    width: 100%;
}
@media screen and (max-width: 685px) {

.tile{
  width:50%;
}

<div class="container">

    <div class="tile">          
        <img class="img" src="Sld1.jpg">
        <p>Img1</p>
    </div>

    <div class="tile">      
        <img class="img" src="Sld2.jpg" >
        <p>Img2</p> 
    </div>

    <div class="tile">
        <img class="img" src="Sld3.jpg">
        <p>Img3</p>         
    </div>

</div>

<div class="container">

    <div class="tile">          
        <img class="img" src="Sld1.jpg">
        <p>Img1</p>
    </div>

    <div class="tile">      
        <img class="img" src="Sld2.jpg" >
        <p>Img2</p> 
    </div>
        
    <div class="tile">
        <img class="img" src="Sld3.jpg">
        <p>Img3</p>         
    </div>

</div>

<style>
  .container{
  display: flex;
  flex-direction: row;
}
.tile {
  width: 33%;
}
  .img {
    width: 100%;
}
@media screen and (max-width: 685px) {

.tile{
  width:50%;
}
}
</style>

我不太明白在媒体屏幕功能中要写什么，这样在小屏幕视图中，上排有 2 个图块，容器的第三个 div 图块移动到它下面的另一行。请帮我解决 CSS.

Answer 1

您需要做的就是在您的容器 class 中添加 flex-wrap: wrap。

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Answer 2

设置 flex-wrap: wrap 以便 flex 容器在断点处换行，然后您可以设置 class 以使用 flex-basis 打破媒体查询中的换行。只需使用 tile 选择器将 class 添加到 div。

.container{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.tile {
  width: 33%;
}

.img {
  width: 100%;
}

@media screen and (max-width: 685px) {
.tile {
  width: 50%;
}

.break {
  display: flex;
  flex-basis: 55%; /* Change to 100% if you want it to fill up entire area under two images on top */
}

<div class="container">

    <div class="tile two">          
        <img class="img" src="Sld1.jpg">
        <p>Img1</p>
    </div>

    <div class="tile two">      
        <img class="img" src="Sld2.jpg" >
        <p>Img2</p> 
    </div>
        
    <div class="tile break">
        <img class="img" src="Sld3.jpg">
        <p>Img3</p>         
    </div>

</div>