Можно ли сверстать на flex книжную ориентацию элементов?

Question

[Денис Букреев]

Такие дела.



Пытаюсь заверстать данный выброс дизайнера.
4 колонки, контент распределяется сначала сверху вниз, потом уж слева направо.
columns не подходят, так как содержимое блоков не должно переноситься, а columns все в кашу переносит.

Распределять скриптом по 4 колонкам тоже не вариант.

И тут я вспомнил про flexbox
Возможно ли такое реализовать на нем?

Comments

[yogurt1]

Рекомендую посмотреть на новое свойство СSS4 под названием grid. Оно позволяет создавать респонсивные сетки на подобие flexbox

[Сергей delphinpro]

yogurt1: Посмотреть-то можно, а толку? Использовать нельзя, нигде не работает.

Answer 1

[ArturArturov]

display: flex;
flex-wrap: wrap;
flex-direction: column;
max-height: 1000px;

Comments

[Денис Букреев]

супер
то, что надо

Answer 2

[DTX]

Именно четыре колонки сделать не получится. Думаю, только max-height в js шаманить.
codepen.io/anon/pen/ZOKbPd

Comments

[Денис Букреев]

думаю сделать так - получить сумму высоты всех блоков, делить на 4 и задавать max-height + погрешность

[DTX]

Денис Букреев: Строго говоря, такое не всегда возможно. Например, пять блоков одинаковой высоты. Они укладываются в три колонки

[Денис Букреев]

DTX: ну, три колонки тоже нормально выглядят, да и случай редкий)