CSS: расположить элементы последовательно, по столбцам

abrakadabr

Постоялец
Регистрация
31 Июл 2017
Сообщения
32
Реакции
7
как, с помощью css, элементы списка, расположить в столбцы, друг под другом последовательно?
Т.е. например есть какойто список из семи элементов. Просто подряд идущие li или div - не важно.

Легко и просто сделать такое расположение элементов:
элемент 1 элемент 2
элемент 3 элемент 4
элемент 5 элемент 6
элемент 7

Но возможно ли сделать вот так:
элемент 1 элемент 5
элемент 2 элемент 6
элемент 3 элемент 7
элемент 4

Т.е. смысл в том что, задавая всему блоку ограниченную высоту, и элементы должны располагаться последовательно по столбцам автоматически. Если ограничения нет, то будет всего 1 столбец, а если ограничиваем высотой достаточной только для четырех элементов, то пятый и далее уходят во второй столбец.
 

skapunker

Создатель
Регистрация
9 Июн 2013
Сообщения
21
Реакции
0
либо использовать grid, либо попробовать ограничить высоту контейнера и использовать flex, тобишь flex-direction:column;flex-wrap:wrap. Мне кажется должно прокатить
 

abrakadabr

Постоялец
Регистрация
31 Июл 2017
Сообщения
32
Реакции
7
Возможно, решить задачу можно при помощи columns - Для просмотра ссылки Войди или Зарегистрируйся
Офигеть! решилось в одно свойство. Достаточно родителю добавить columns: 2; и все.
т.е. сразу задается две колонки и высоту даже выставлять не надо. Автоматически выставляется в две колонки.

либо использовать grid, либо попробовать ограничить высоту контейнера и использовать flex, тобишь flex-direction:column;flex-wrap:wrap. Мне кажется должно прокатить
А вот флексами не получилось. Ради интереса, может у вас получится, подскажите :)
 

dremlifestyle

Создатель
Регистрация
19 Апр 2020
Сообщения
29
Реакции
18
А вот флексами не получилось. Ради интереса, может у вас получится, подскажите :)

Флексами можно через Order конечно-же. Но если список динамичен и постоянно меняется, то это решение не лучший вариант.
 

abrakadabr

Постоялец
Регистрация
31 Июл 2017
Сообщения
32
Реакции
7
Флексами можно через Order конечно-же. Но если список динамичен и постоянно меняется, то это решение не лучший вариант.
через order - это понятно, но это не автоматически)
просто думал что с помощью флексов можно добиться такого же поведения как с columns
 
Сверху