Belirtilen Yükseklik olmadan CSS Flex Sütun Düzeni

Question

Bugün sadece esnek bir keşif yaptım ve küçük bir görsel sorunu çözeceğine inanıyorum.

Zaten alfabetik olarak sıralanmış öğelerin bir listesini aldım. Hepsi aynı genişliğe sahipler ve şimdiye kadar, onları sola sürükledim. Bu, yatay boşluk bittiğinde sarma ile soldan sağa bir sırayla sonuçlanır.

Yapmayı umduğum şey, mevcut genişlik ile mümkün olduğunca çok sayıda sütun içeren yukarıdan aşağıya sıralama. Bu liste dinamik olarak görüldüğünde yükseklik değişkendir. Ve yatay alanın kaybolması (boyutlandırma), birçok sütun gibi önlenerek yükseklik artacaktı.

Esnekliğin başarmaya çalıştığı şeyin açık doğası göz önüne alındığında bunun destekleneceğini düşünmekteydim, ancak şu ana kadar bunu anlayamıyorum. "display: flex" ve "flex-flow: column wrap" doğru görünüyor, ancak sağlayamayacağım belirli bir yükseklik gerektirir.

Bir şey mi eksik?

Düzenleme: Burada oynamak bir JSFiddle oluşturduk : Eğer ul kapalı yüksekliğini alırsak 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; 
} 

, hiçbir şey sarar.

Kavramsal sorun, "sütun" akışının, genişlikten ziyade kabın yüksekliğine bağlı olmasıdır, istediğim şey budur. Alanın ne kadar uzun olması umrumda değil. Mevcut genişlikte olabildiğince çok sütun bulundurmayı umuyorum. Belki bu sadece esnek kongre rahatsız edici bir eksikliktir. Bu aradığınız buysa

Answer 1

emin değilim, ama Yani şimdi liste öğeleri yüksekliğini ve genişliğini 100vh ve

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

100vw flex-flow: row wrap; için flex-flow: column wrap: değiştirip değiştirmeniz gerekebilir aynı genişliğini koruyun ve yüksekliğini görünüm genişliğine göre ayarlayın. Updated Fiddle

Answer 2

Bu CSS sütunlar için bir iş gibi görünüyor: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns yerine esnek bir

, ul bir column-width CSS kuralını vermek:

ul { 
    column-width: 150px; 
} 

Here's a JSFiddle.