Question

我在 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。

Answer 1

设置 flex-wrap: wrap 以便 flex 容器将在断点处换行，然后您可以设置一个类来使用 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>

Answer 2

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

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

如何使这些图像块具有响应性

2 个答案: