如何根据给定的无法更改的html模板仅使用CSS在flex上布局照片库？
任务：
第一个选项是严格连续 4 张照片，但这样它不依赖于屏幕的宽度。也就是说，宽度为1000px，照片的宽度应为250px，加上边距和框架，每张照片的宽度为1200 - 300，那么将有4张连续，依此类推。
第二个选项是连续的可变数量（这取决于屏幕宽度），但帧大小固定为 150 像素 x 150 像素。
不同（任何）尺寸和比例的照片，添加框架以使其看起来均匀。
两个选项的 HTML 标记必须相同。
解决方案需要基于这个模式来制定：
<style>.wrap div {border: 1px solid grey;padding:3px}</style>
<div class="wrap">
<div><img src="01.jpg" alt="Изображение 01"></div>
<div><img src="02.jpg" alt="Изображение 02"></div>
<div><img src="03.jpg" alt="Изображение 03"></div>
<div><img src="04.jpg" alt="Изображение 04"></div>
<div><img src="05.jpg" alt="Изображение 05"></div>
<div><img src="06.jpg" alt="Изображение 06"></div>
<div class="seven"><img src="07.jpg" alt="Изображение 07"></div>
<div><img src="08.jpg" alt="Изображение 08"></div>
</div>