获取flexbox列包装以使用全宽并最小化高度

Question

我有一个宽度固定,高度可变的容器.我用不明数量的元素填充容器.我希望这些元素能够在列中排列,从上到下,然后从左到右.

我可以使用column,但我不知道子元素的最大宽度,所以我不能设置column-width或column-count.

我觉得display: flex有flex-flow: column wrap是要走的路,但如果我保持height: auto在容器上,它将会像一列没有包装元素使用所有可用的宽度.

我可以说服flexbox使用所有可用的宽度,从而最大限度地减少容器的高度吗？你会建议一个不同的解决方案？

---

小提琴: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;
}