Układ kolumn CSS Flex bez określonej wysokości

Question

Właśnie odkryłem flex już dziś i mam nadzieję, że rozwiąże to małe wizualne wyzwanie.

Mam listę przedmiotów już posortowanych alfabetycznie. Wszystkie mają tę samą szerokość i do tej pory miałem ich pływających w lewo. Skutkuje to rozkazami od lewej do prawej z zawijaniem, gdy kończy się przestrzeń pozioma.

Co miałem nadzieję zrobić, to sortowanie z góry z jak największą liczbą kolumn z dostępną szerokością. Ponieważ ta lista jest dynamiczna, wysokość byłaby zmienna. A wysokość musiałaby wzrosnąć, gdy przestrzeń pozioma zostanie utracona (zmiana rozmiaru), zapobiegając tak wielu kolumnom.

Biorąc pod uwagę oczywisty charakter tego, co flex próbuje osiągnąć, myślę, że będzie to wspierane, ale do tej pory nie mogę tego zrozumieć. "display: flex" i "flex-flow: column wrap" wydają się poprawne, ale wymaga to określonej wysokości do pracy, której nie mogę zapewnić.

Czy brakuje mi czegoś?

Edit: Utworzyłem JSFiddle do zabawy tutaj: 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; 
} 

Zażycie wysokość off ul nic nie zawija.

Wydaje się, że problem koncepcyjny polega na tym, że przepływ "kolumnowy" jest powiązany z wysokością kontenera, a nie z szerokością, co jest tym, czego chcę. Nie dbam o to, jak wysoki powinien być ten obszar. Dbam o to, by mieć jak najwięcej kolumn w dostępnej szerokości. Może to tylko denerwujące niedociągnięcie konwencji flex.

Answer 1

Nie jestem pewien, czy to jest to, czego szukasz, ale może trzeba zmienić flex-flow: column wrap: do flex-flow: row wrap; i zmienić wysokość i szerokość do 100vh i 100vw

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

Więc teraz elementy listy zachowaj tę samą szerokość i dostosuj wysokość w zależności od rozmiaru szerokości widoku. Updated Fiddle

Answer 2

To wydaje się zadanie dla kolumn CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

Zamiast flex, dać ul regułę column-width CSS:

ul { 
    column-width: 150px; 
} 

Here's a JSFiddle.