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

Question

我希望在我的網站中實現兩個圖像，只要屏幕比600px更寬，但是當寬度較小時（例如在智能手機上），它會並排顯示。

 .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情況下實現此效果？ 我的意思是柔性包裝是一種非常優雅的做事方式，我認為有一種非常自然的方式來實現這一目標嗎？

Answer 1

如果屏幕小於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> 

Answer 2

你能刪除'max-width：100％;' 從圖像或你不能改變任何風格？

一旦沒有足夠的空間將它們放在一條線上，刪除它就會折疊它們。