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

Тема в разделе "Верстка", создана пользователем abrakadabr, 23 май 2020 в 06:35.

XEvil 4.0 Релиз Состоялся!
Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. abrakadabr

    abrakadabr Создатель

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

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

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

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

    skapunker Создатель

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

    Katran0 Создатель

    Регистр.:
    13 июн 2018
    Сообщения:
    10
    Симпатии:
    1
    abrakadabr нравится это.
  4. abrakadabr

    abrakadabr Создатель

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

    А вот флексами не получилось. Ради интереса, может у вас получится, подскажите :)
     
  5. dremlifestyle

    dremlifestyle Создатель Нарушитель

    Регистр.:
    19 апр 2020
    Сообщения:
    15
    Симпатии:
    0
    Флексами можно через Order конечно-же. Но если список динамичен и постоянно меняется, то это решение не лучший вариант.