Question

我有一个宽度固定，高度可变的容器。我用不明数量的元素填充容器。我喜欢将这些元素排列在列中，从上到下，然后从左到右。

我可以使用column，但我不知道子元素的最大宽度，因此我无法设置column-width或column-count。< / p>

我认为display: flex与flex-flow: column wrap是可行的方法，但如果我在容器上维护height: auto，它将生成一个列而不包装元素以使用所有可用的宽度。

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

来源：

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;
}

Answer 2

我已妥协并设置height: 10em（似乎可以接受）以及overflow-y: auto（在溢出的情况下添加水平滚动条）容器元素。

我仍然想知道是否有办法使用所有可用的宽度并尽量减少高度。

Answer 3

最后，您的溢出选项是隐藏，滚动或换行。这个版本怎么样？它需要任何溢出的项目并将它们放在第二行。第二行中的项目仍然填充可用空间，但由于共享空间的项目数较少，因此项目较大。

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

div {
    outline: 1px solid red;
    display: flex;
    flex-flow: row wrap;
}
span {
    outline: 1px solid blue;
    flex:1;
}

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

3 个答案: