Есть ли на флексах имитация css column?

Question

[Константин Б.]

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

Из (Направление важно)
item1
item2
item3
item4
item5
item6

Сделать так
item1 item3 item5
item2 item4 item6

Допустим я могу разбить их на три части вложить в колонки
.listing>.col*3>.item*2

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

P.S. я не занимаюсь версткой поэтому знаю не все, нагуглить у меня не получилось, по всем запросам выдает просто сетки

Comments

[Алексей Уколов]

А зачем иммитировать column, если можно просто использовать column?

Answer 1

[Andrew]

flex-direction: column, оно?

Answer 2

[Dima Polos]

Если правильно понял суть задачи, то рекомендую попробовать задать флекс контейнеру display flex, flex-direction column и flex-wrap wrap.
Второе, надо задать высоту контейнеру. Например, в столбик хотим задать три строчки, можно сделать так: задать line-height 1rem, задать font-size, а высоту для контейнера задать так: flex-basis 3rem. По идее все, контент будет располагаться по вертикали, ровно в три строки, все остальное будет переноситься на следующий столбик. Для распределения столбиков надо использовать свойство align-content (flex-start, flex-end, center, space-between, space-around). Это свойственно задает распределение пространства между столбиками, задавать его надо контейнеру.