"Колоночная простановка" flexbox?

Question

[Антон]

День добрый.
Мало знаком с флексом.
Может кто в курсе, каким образом проставить итемы, чтобы на следующей строке они выравнивались не по одной базовой линии ряда, а четко под своим соседом сверху?
Вот скрин того, что имею в виду

скрин

И вот на чем я остановился пока

Понятно, что можно колонками это сделать, но вот больно не хочется. Может гриды умеют, но с гридами вообще не знаком.

Answer 1

[Сергей delphinpro]

Флексы так не умеют.
Как вариант, можете попробовать использовать колоночную раскладку.
https://jsfiddle.net/0o3cps48/1/

Comments

[Антон]

Благодарю! Да, думал как раз, что все таки колонки, правда другой реализации.
А с поддержкой этой штуки как по опыту, в частности на яблочных? В can i use я залезу, конечно, но интересно мнение практика.

[Сергей delphinpro]

Антон, с самими колонками всё отлично.
Там есть траблы с разрывом элементов (page-break-inside), нужны префиксы или устаревшие версии свойств. Не помню, редко использую колонки.

[Антон]

Сергей delphinpro, Благодарю. Ну, надеюсь, что автопрефиксер воткнет недостающее. В крайнем случае верну так, как есть

[Сергей delphinpro]

Антон, вот так еще можно, оно вроде везде работает (inline-block) https://jsfiddle.net/0o3cps48/2/
Ну или всё вместе, для надежности =)

[Антон]

Сергей delphinpro, Так даже лучше, ибо в предыдущем варианте, так и не понял, почему, но без красного бордера итемов, некоторые элементы слетают, и пришлось накостылить с его покраской в транспарент. Мистика.