没有指定高度的 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;
}

Here's a JSFiddle.