Question

在此示例中，我使用的是flex-direction:row

http://jsfiddle.net/9a1d2ddz/

如果空间不足以容纳元素，则会出现垂直滚动条

我想达到同样的效果，但是“从上到下”的盒子排序

http://jsfiddle.net/ebd8rsnx/

但是我没有获得水平滚动条而是想保留垂直滚动条

基本上与上述相同，但是从上到下的盒子排序而不是从左到右

我认为这是我可以用max-height做的事情：min-content但似乎没有效果。

提前谢谢

div
{
    overflow:auto;
    border:2px blue solid;
    box-sizing:border-box;
    flex-direction:column; /* try column|row */
    display:flex;
    flex-wrap:wrap;
}

span
{
    min-width:150px;
    min-height:150px;
    flex:1 1 auto;
    border:1px red solid;
    display:block;
    overflow:hidden;
    box-sizing:border-box;
}

Answer 1

我尝试指定溢出方向，但在这种情况下似乎不起作用。我认为问题在于你试图将你的溢出方向作为你的包裹方向例如，尝试使它在水平方向上做同样的事情。它会产生同样的问题，因为你试图以相同的方向流动和溢出。也就是说，我不认为你能用直接的css做你想做的事。您可能需要考虑Columnizer或Masonry等js工具。原因是它不能只流动。它需要先计算列，然后调整元素以填充列，然后再确定溢出方向的内容长度。对于流，如果溢出与流的方向相同，则浏览器无法确定何时应该断开到新的行/列。我以前做过这样的工作，横向工作，但它的工作方式是把所有东西分成一排，这不是你真正想要的。

Answer 2

CSS3＆＃34;专栏＆＃34;功能对我很有用： http://caniuse.com/#feat=multicolumn

列内容可以是任何内容，而不是纯文本。在包含内容的div上设置列宽，并将其包装到另一个具有固定高度的div中。

.columns-container {
    max-height: 50vh;
    overflow-y:auto;
}
.columns {
    -webkit-column-width: 15em;
    -moz-column-width: 15em;
    column-width: 15em;
    /*optional column-count*/
    /*
    -webkit-column-count:4;
    -moz-column-count: 4;
    column-count: 4;
    */
    -webkit-column-gap: 0;
    -moz-column-gap: 0;
    column-gap: 0;
}

<div class="columns-container">
    <div class="columns">
        <div>Lorem ipsum dolor sit amet. Sample text 1</div>
        <div>Lorem ipsum dolor sit amet. Sample text 2</div>
        ...
        <div>Lorem ipsum dolor sit amet. Sample text 1000</div>
    </div>
</div>

使用换行优先在列弯曲方向上垂直滚动水平

2 个答案: