Как сделать так, чтобы блоки распределялись колонками?

Question

[Dan Ryehood]

Интересная задачка возникла. Не могу придумать, как сделать вот так, как на картинке (только средствами HTML+CSS):



Хоть идейку подкиньте. Важно, чтобы блоки в коде шли подряд. И без использования JS.

По сути, это полный аналог float'а, только блоки нужно перекидывать не построчно, а по колонкам. Нужно какбэ float:top, но такого нет.

Пробовал флекс боксами, тоже не помогло. Там есть свойство flex-direction:column, но оно не перекидывает блоки в новую колонку, пакость такая, в одну фигачит!

Comments

[Dimitriy]

Блоки будут "перебрасываться" если задать высоту основного блока, можно не переворачивать ось, поменяйте у блоков порядок следования с помощью "order"

Answer 1

[Dimitriy]

Как вариант можно и так, пример без учета кросса:

body > div {
            display: flex;
            flex-flow: column wrap;
            height: 600px;
            align-content: flex-start;
        }
        div > div  {
            width: 200px;
            height: 150px;
            border: 1px solid #ccc;
            margin: 10px;
        }
        div > div:nth-of-type(4)  {
            height: 300px;
        }
        div > div:nth-of-type(5)  {
            height: 200px;
        }

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

Ну и, ограничение, конечно, в поддержки браузерами flex`а

Comments

[Dan Ryehood]

Е-мое! Работает! align-content — вот что я упустил! Спасибо! :)

Answer 2

[Анна Бакурова]

float так работает, разве нет?

Comments

[Анна Бакурова]

div div{
float: left;
}

[Dan Ryehood]

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

[Анна Бакурова]

@wbird так Я думала это Вам и нужно Вы же написали подряд... А сделать эти колонки дивами не вариант? Типа 1, 2, 3 - в один див, 4, 5 - в другой и т д

[Dan Ryehood]

Вот какразтаке не вариант — в коде блоги должны идти подряд. На картине нарисовано. Потому как эти блоки могут добавляться/удаляться джаваскриптом. И должны автоматически распределяться стилями.

Но я так подозреваю, что это невозможно без скрипта... А ведь такая полезная была бы возможность.