Flexbox оправданная сетка

Question

Я хочу создать такую ​​же основную c оправданную сетку с flexbox. Если я выложу несколько изображений и приложу гибкую пленку, это будет выглядеть так:

#wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}

.box {
  margin: 1px;
  position: relative;
  text-align: center;
  height: 100%;
}

img {
  position: relative;
  display: block;
}

<div id="wrap">
  <div class="box"><img src="https://via.placeholder.com/250x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/400x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/500x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/150x150" /></div>


</div>

Это работает хорошо, но как только доступная ширина становится меньше, изображения попадают в новую строку (из-за переноса, очевидно). Мне интересно, можно ли сделать это адаптивным, чтобы он сохранял этот макет независимо от доступной ширины? Но это должно быть динамически c без применения отдельных классов к изображениям с пользовательскими css.

Или это невозможно сделать без javascript?

Answer 1

Вот основа скрипки в моем понимании. https://jsfiddle.net/m4j1e3tb/

Вещи, которые я изменил:

• каждая строка будет иметь свой собственный гибкий контейнер

• гибкий контейнер не будет переноситься

• К «ящику», являющемуся гибким элементом, я добавил flex-shrink: 1, который говорит коробке сокращаться, когда пространство «заканчивается»

.box {
  margin: 1px;
  position: relative;
  text-align: center;
  max-width: 100%;
  flex-shrink: 1;
}

Редактировать: форматирование. Извините, я еще новичок в stackoverflow ..