Layout colonna flessibile CSS senza altezza specificata

Question

Ho appena scoperto il flex oggi e spero che risolva una piccola sfida visiva.

Ho un elenco di elementi già ordinati in ordine alfabetico. Hanno tutti la stessa larghezza e, fino ad ora, li ho fatti fluttuare a sinistra. Ciò si traduce in un ordine da sinistra a destra con il wrapping quando lo spazio orizzontale si esaurisce.

Quello che speravo di fare è avere un ordinamento top-down con il maggior numero possibile di colonne con la larghezza disponibile. Visto che questa lista è dinamica, l'altezza sarebbe variabile. E l'altezza dovrebbe aumentare man mano che lo spazio orizzontale viene perso (ridimensionamento) impedendo il numero di colonne.

Data la natura apparente di ciò che flex sta cercando di realizzare, penserei che questo sarebbe supportato, ma finora non riesco a capirlo. "display: flex" e "flex-flow: column wrap" sembrano corretti, ma richiede un'altezza specifica per funzionare, cosa che non posso fornire.

Mi manca qualcosa?

Edit: ho creato un JSFiddle con cui giocare qui: 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; 
} 

Se si prende l'altezza da ul, niente avvolge.

Sembra che il problema concettuale sia che il flusso "colonna" è tutto legato all'altezza del contenitore anziché alla larghezza, che è ciò che voglio. Non mi interessa quanto sia alta la zona. Mi interessa avere il maggior numero possibile di colonne nella larghezza disponibile. Forse questa è solo una fastidiosa mancanza della convenzione flex.

Answer 1

io non sono sicuro se questo è quello che stai cercando, ma potrebbe essere necessario cambiare flex-flow: column wrap: a flex-flow: row wrap; e modificare l'altezza e la larghezza di 100VH e 100vw

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

Così ora le voci di elenco mantenere la stessa larghezza e regolare l'altezza in base alle dimensioni della larghezza della vista. Updated Fiddle

Answer 2

Questo mi sembra un lavoro per le colonne CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

Invece di flex, dare l'ul una regola column-width CSS:

ul { 
    column-width: 150px; 
} 

Here's a JSFiddle.