沒有指定高度的CSS Flex列布局

Question

剛剛發現今天的flex，我希望它能解決一個小的視覺挑戰。

我有一個按字母順序排序的項目列表。 它們都具有相同的寬度，到目前為止，我已將它們向左浮動。 當水平空間用完時，這會導致從左到右的順序。

我希望做的是使用可用寬度盡可能多的列進行自上而下排序。 看到此列表是動態的，高度將是可變的。 並且當水平空間丟失（調整大小）時，高度必須增加，以防止盡可能多的列。

鑒於flex試圖完成的明顯性質，我認為這將得到支持，但到目前為止，我無法弄明白。 “display：flex”和“flex-flow：column 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上取下高度，沒有任何東西包裹。

似乎概念問題是“列”流程都與容器的高度相關而不是寬度，這就是我想要的。 我不在乎這個區域有多高。 我關心在可用寬度上盡可能多的列。 也許這只是flex慣例的一個惱人的缺點。

Answer 1

這似乎是CSS專欄的一項工作： https ： //developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

而不是flex，給ul一個column-width CSS規則：

ul {
  column-width: 150px;
}

這是一個JSFiddle。

Answer 2

我不確定這是否是您正在尋找的，但您可能需要更改flex-flow: column wrap: to flex-flow: row wrap; 並將高度和寬度更改為100vh和100vw

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

所以現在列表項保持相同的寬度，並根據視圖寬度的大小調整高度。 更新小提琴