Как в flex-wrap заставить обтекать блоки?

Question

[Ingernirated]

Всем привет!
Как заставить блоки начинаться от верхнего элемента, а не с новой линии?
Что бы зеленый блок начался от красного, а коралловый так и остался от синего.
https://jsfiddle.net/n10sxmuo/

Comments

[Rustam Bainazarov]

Flex так не умеет.

[Rustam Bainazarov]

Вам нужен Grid или JS-плагин для т. н. Masonry Layout.

[Ankhena]

Варианты:
grid
masonry
columns
flex columns (потребуется ограничить высоту обертки)

3 последних варианта изменят порядок следования блоков на вертикальный. При известном количестве блоков это не страшно.

Флоаты, кстати, тоже помогут, если количество блоков известно и их порядок изменяемый.

Answer 1

[Mozzarella]

В данной ситуации проблема решается с помощью grid'ов https://developer.mozilla.org/en-US/docs/Web/CSS/C...

Answer 2

[Владимир]

Простого решения нет, если нужно на чистом css то гуглите "masonry layout using flexbox" там много решений.