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

abrakadabr

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

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

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

Т.е. смысл в том что, задавая всему блоку ограниченную высоту, и элементы должны располагаться последовательно по столбцам автоматически. Если ограничения нет, то будет всего 1 столбец, а если ограничиваем высотой достаточной только для четырех элементов, то пятый и далее уходят во второй столбец.
 
либо использовать grid, либо попробовать ограничить высоту контейнера и использовать flex, тобишь flex-direction:column;flex-wrap:wrap. Мне кажется должно прокатить
 
Возможно, решить задачу можно при помощи columns - Для просмотра ссылки Войди или Зарегистрируйся
Офигеть! решилось в одно свойство. Достаточно родителю добавить columns: 2; и все.
т.е. сразу задается две колонки и высоту даже выставлять не надо. Автоматически выставляется в две колонки.

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

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