没有指定高度的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-widthCSS规则：

ul {
  column-width: 150px;
}

这是一个JSFiddle。

Answer 2

我不确定这是否是您正在寻找的，但您可能需要更改flex-flow: column wrap:为flex-flow: row wrap;并将高度和宽度更改为 100vh 和 100vw

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

所以现在列表项保持相同的宽度并根据视图宽度的大小调整高度。更新了小提琴