如何使这些图像块响应答案

【问题标题】：How to make these image tiles responsive如何使这些图像块响应
【发布时间】：2021-07-14 03:49:35
【问题描述】：

我在 div 元素中有 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。

【问题讨论】：

标签： html css flexbox responsive-design frontend

【解决方案1】：

设置flex-wrap: wrap，这样弹性容器将在断点处换行，然后您可以设置一个类以使用flex-basis 打破媒体查询中的换行。只需使用 tile 选择器将该类添加到 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>

【讨论】：

【解决方案2】：

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

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

【讨论】：