フレックスボックス：画面が小さすぎると折りたたむ - どのように？

Question

スマートフォンのような利用可能な幅が狭い場合には、画面が幅が600pxより広い限り、サイドバイサイドで表示される2つの画像を自分のウェブサイトに実装したいと考えています。

.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

「最大幅：100％;」を削除できますか？画像の中からスタイルを変更することはできませんか？

これを削除すると、両方の行を1つの行にまとめるための十分なスペースがなくなると、それを崩壊させます。

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>