css - 获取 flexbox 列换行以使用全宽并最小化高度

Question

我有一个固定宽度和可变高度的容器。我正在用未知数量的元素填充容器。我希望元素按列排列，从上到下然后从左到右。

我可以使用column，但我不知道子元素的最大宽度，所以我不能设置column-width 或列数。

我认为 display: flex 和 flex-flow: column wrap 是可行的方法，但如果我保持 height: auto容器，它将生成为单列而不包装元素以使用所有可用宽度。

我可以说服 flexbox 使用所有可用的宽度从而最小化容器的高度吗？您会建议不同的解决方案吗？

---

fiddle :http://jsfiddle.net/52our0eh/

来源:

HTML:

<div>
    <span>These</span>
    <span>should</span>
    <span>arrange</span>
    <span>themselves</span>
    <span>into</span>
    <span>columns,</span>
    <span>using</span>
    <span>all</span>
    <span>available</span>
    <span>width</span>
    <span>and</span>
    <span>minimizing</span>
    <span>the</span>
    <span>container's</span>
    <span>height.</span>
</div>

CSS:

div {
    outline: 1px solid red;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    /*height: 8em;*/
}
span {
    outline: 1px solid blue;
}

Answer 1

你找的更像是栏目规则: DEMO

div {/* do not set column numbers rule */
    width: 100%;
    -moz-column-width:4em;
    column-width:4em;
    -moz-column-gap:0;
    column-gap:0;
    -moz-column-rule:solid 1px;
    column-rule:solid 1px;
    text-align:center;
}