如何使用css3 flexbox创建多列布局而不垂直扩展？

Question

我在Chrome中使用css3的flexbox(无需担心跨浏览器).我很难说服它以我喜欢的方式布置我的内容.这是我的目标草图:

这是我尝试的jsFiddle:http://jsfiddle.net/Yht4V/2/这看起来效果很好,除了每个.group都会扩展它的高度而不是创建多个列.

我在这里普遍使用flexbox.在body垂直放置,用#contentDIV服用页面的剩余高度.每个.group都是水平布局的.最后,每个.item都是在.group垂直方向上进行包装.

不幸的是,每个都.group通过扩展#content高度而最终成为单个列,从而导致垂直滚动条(不需要的).如果我将每个的高度设置.group为固定的像素大小,则项目会分成多个列,但这会破坏弹性框的流动性.这是固定高度的样子:http://jsfiddle.net/Yht4V/3/

那么,如何#content在不设置固定高度的情况下使用flexbox管理所有内容,我怎样才能使div不垂直扩展？我期待flexbox触发更多列而不是扩展其父级的高度并导致滚动条.

Answer 1

从我在Flexbox的Chrome和Opera实现中看到的,一flex-direction列需要限制元素的高度,否则它将继续垂直扩展.它不必是固定值,也可以是百分比.

也就是说,.group使用CSS Columns模块也可以实现元素所需的布局.元素的流程类似于flexbox列方向的流程,但只要有足够的宽度,它就会创建列,无论文档的长度如何.

http://jsfiddle.net/Yht4V/8/(你必须原谅缺少前缀)

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    flex: 1 1 auto;
}

#content > .group:first-child {
    columns: 10em;
    flex-grow: 2;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    break-inside: avoid;
}

#content > .group .item:first-child {
    margin-top: 0;
}

将它留作一堆嵌套的flexbox,这就像我能得到它一样接近:

http://jsfiddle.net/Yht4V/9/(再次,没有前缀)

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap;
    flex: 1 1 30%;
    max-height: 100%;
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}