Как убрать одинаковую высоту Flex блоков div?

Question

[Sacred133]

Добрый день!

Есть сетка из пяти флекс боксов, с разбивкой по три бокса по горизонтали, каждый флекс бокс содержит список разной высоты. К примеру, второй флекс бокс, содержит всего 1 строку, как сделать так, чтобы флексбокс находящийся снизу, прижался к этой строке, заполнив пустоту?

Пример: https://codepen.io/hpkatkmh-the-decoder/pen/oNqwxqZ

Comments

[Ankhena]

Замените flex на columns.
Или используйте скрипты типа Masonry.

Answer 1

[Вадим]

как сделать так, чтобы флексбокс находящийся снизу, прижался к этой строке, заполнив пустоту?

Никак, это против самой идеи flexbox.

Вот прижмётся он к верху, заняв пустоту, со следующим что должно произойти?
По факту Вы спрашиваете про что-то вроде masonry раскладки. Нативно CSS так пока ещё не умеет, насколько мне известно(есть экспериментальная фича за флагом в фаер фокс).
Копайте в эту сторону

Либо поменять раскладку с построчной на поколоночную.

Comments

[Sacred133]

я подозревал, но хотел убедится все таки

Answer 2

[Александр Талалаев]

Если именно на флексах, то можно хакать через flex-direction: column и задавать высоту этого контейнера. Тогда они складываться у вас будут по вертикалям без лишних пустот. Но это такой полукостыльный хак, хотя в некоторых ситуациях допустим и помогает.