Вертикальное выравнивание во flex контейнере

Question

Во flex-контейнере есть элементы, ширина каждого одинаковая, высота зависит от контента. В одной «строке» должно быть 3 элемента, дальше перенос с помощью свойства flex-wrap: wrap.

Хочу при разной высоте блоков сохранить «прижатие» друг к другу по высоте. Пробовал разные варианты, но не получилось. Накидал песочницу:

<div class="container">
  <div class="point one"></div>
  <div class="point"></div>
  <div class="point"></div>
  <div class="point"></div>
  <div class="point"></div>
  <div class="point"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  width: 390px;
}

.point{
  width: 120px;
  height: 80px;
  background: #ccc;
  margin: 5px;
}

.one {
  height: 120px;
}

https://jsfiddle.net/js0efwra/10/

Как прижать 5 и 6 элемент к 2 и 3?

Answer 1

В данном конкретном случае aligns-item: flex-end

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 390px;
}

Answer 2

Masonry-раскладка, [моё решение с помощью гридов][1]

[1]: https://codepen.io/Protoff/pen/JjXgxvb

БЛОГ НА HUSL

Вертикальное выравнивание во flex контейнере

Ответы (2 шт):