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

Question

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

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

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

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

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

Edit: Я создал 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; 
} 

Если взять высоту выключения ул, ничего не заворачивает.

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

Answer 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; 
} 

Так что теперь элементы списка сохраняйте ту же ширину и отрегулируйте высоту в зависимости от размера ширины обзора. Updated Fiddle

Answer 2

Это похоже на работу для CSS столбцов: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

Вместо гибкого, дать ЛУ правило в column-width CSS:

ul { 
    column-width: 150px; 
} 

Here's a JSFiddle.