Flexbox：當屏幕太小時摺疊 - 如何？

Question

我想在我的網站上實現兩個圖像，只要屏幕寬於600像素，並且寬度可用（如智能手機），則可以並排顯示。

.imgrid { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.img { 
 
    flex: 1; 
 
} 
 

 
.img img { 
 
    max-width: 100%; 
 
}

<section class="imgrid"> 
 
    <div class="img"> 
 
    <img src="http://via.placeholder.com/500x500" /> 
 
    </div> 
 
    <div class="img"> 
 
    <img src="http://via.placeholder.com/500x500" /> 
 
    </div> 
 
</section>

.imgrid有flex-flow: row wrap這樣，當沒有足夠的空間來顯示在同一行這兩個項目將換行。所以這裏的想法是，一旦沒有足夠的屏幕寬度可用，它自然會崩潰。

.img的flex: 1;但是，由於圖像將縮放爲相同的大小並共享線條的寬度，所以不會發生這種情況。

我已經添加了媒體查詢，但我不知道該怎麼做。理想情況下，我只是刪除flex: 1，但我不認爲這是可能的。

如何在不恢復使用px的情況下實現此效果？我的意思是flex包裝是一種非常優雅的做事方式，我會假設有一種非常自然的方式來實現這一點？

Answer 1

您是否可以移除'max-width：100％;'從圖像或你是否無法改變任何風格？

刪除這些將一旦沒有足夠的空間將它們放在一條線上時將它們摺疊。

Answer 2

如果屏幕小於600px，則可以添加媒體查詢。演示：

.imgrid { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.img img { 
 
    width: 100%; 
 
} 
 

 
/* add media query for growing and shrinking */ 
 
@media (max-width: 600px) { 
 
    .img { 
 
    flex: 1 1 auto; 
 
    } 
 
}

<section class="imgrid"> 
 
    <div class="img"> 
 
    <img src="http://via.placeholder.com/500x500" /> 
 
    </div> 
 
    <div class="img"> 
 
    <img src="http://via.placeholder.com/500x500" /> 
 
    </div> 
 
</section>