Как сделать такую галерею (flexbox)?

424

12 марта 2017, 04:43

Проблема с выравниванием, когда делаю новый ряд(2), блоки выравниваются по линии, а нужно чтобы под каждым отдельным блоком. Как это сделать?

Answer 1

Задайте контейнеру с display: flex свойство flex-flow: column wrap — таким образом потомки будут располагаться по оси Y, а не X, и будут переноситься. Также добавьте ему ограничение по высоте. Обратите внимание на порядок блоков.

.container { 
  display: flex; 
  flex-flow: column wrap; 
  max-height: 700px; 
} 
 
.block { 
  width: 180px; 
  margin: .5em; 
  border: 1px solid; 
} 
 
.block--1 { 
  height: 100px; 
} 
 
.block--2 { 
  height: 150px; 
} 
 
.block--3 { 
  height: 170px; 
} 
 
.block--4 { 
  height: 120px; 
} 
 
.block--5 { 
  height: 190px; 
}

<div class=container> 
  <div class="block block--2">1</div> 
  <div class="block block--1">2</div> 
  <div class="block block--4">3</div> 
  <div class="block block--3">4</div> 
  <div class="block block--5">5</div> 
  <div class="block block--1">6</div> 
  <div class="block block--4">7</div> 
  <div class="block block--3">8</div> 
  <div class="block block--2">9</div> 
  <div class="block block--5">10</div> 
  <div class="block block--1">11</div> 
</div>