Выровненная сетка Flexbox

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

#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>

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

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


html css flexbox grid
person Toniq    schedule 26.01.2020    source источник
comment
Вы имеете в виду, что хотите, чтобы контейнер не переносил изображения в новую строку, а продолжал уменьшать размеры изображений, сохраняя все в одной строке?   -  person fishcakesAndCoffee    schedule 26.01.2020
comment
Да, что-то вроде оправданных галерей работает, но я боюсь, что для этого мне понадобится javascript. Или хотя бы определенную высоту строки.   -  person Toniq    schedule 26.01.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вот скрипка, насколько я понимаю. https://jsfiddle.net/m4j1e3tb/

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

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

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

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

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

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

person fishcakesAndCoffee    schedule 26.01.2020