CSS Flex Column Layout без указанной высоты

Только что открыл flex сегодня, и я надеюсь, что он решит небольшую визуальную задачу.

У меня есть список элементов, отсортированных по алфавиту. Все они имеют одинаковую ширину, и до сих пор у меня они плавали влево. Это приводит к порядку слева направо с упаковкой, когда заканчивается горизонтальное пространство.

То, что я надеялся сделать, - это сортировать сверху вниз с максимально возможным количеством столбцов с доступной шириной. Увидев, что этот список является динамическим, высота будет переменной. И высота должна увеличиться по мере потери горизонтального пространства (изменения размера), предотвращающего как можно большее количество столбцов.

Учитывая очевидный характер того, что Flex пытается достичь, я бы подумал, что это будет поддерживаться, но пока я не могу понять это. "display: flex" и "flex-flow: wrap wrap" выглядят правильно, но для этого требуется определенная высота, которую я не могу предоставить.

Я что-то пропустил?

Изменить: Я создал JSFiddle, чтобы играть здесь: https://jsfiddle.net/7ae3xz2x/

ul {
    display: flex;
    flex-flow: column wrap;
    height: 100px;
}
ul li {
    width: 150px;
    list-style-type: none;
    border: 1px solid black;
    text-align: center;
}

Если вы выберете высоту с ul, ничего не обернется.

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

ОТВЕТЫ

Ответ 1

Я не уверен, что это то, что вы ищете, но вам может потребоваться изменить flex-flow: column wrap: на flex-flow: row wrap; и изменить высоту и ширину на 100vh и 100vw

ul {
  display: flex;
  flex-direction: column;
  flex-flow: row wrap;
  height: 100vh;
  width: 100vw;
}

Итак, теперь элементы списка сохраняют ту же ширину и регулируют высоту в зависимости от размера ширины вида. Обновлено Fiddle