google-chrome - 如何使用css3 flexbox创建不垂直扩展的多列布局？

Question

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

这是我尝试的 jsFiddle:http://jsfiddle.net/Yht4V/2/除了每个 .group 将扩展其高度而不是创建多个列之外，这似乎工作得很好。

我在这里普遍使用 flexbox。 body 垂直布局，#content div 占据页面的剩余高度。每个 .group 都是水平放置的。最后，每个 .item 都在一个 .group 中垂直放置并环绕。

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

那么，我怎样才能让我的 #content div 不垂直扩展，因为所有内容都是用 flexboxes 管理的，没有设置固定的高度？我期待 flexbox 触发更多列，而不是扩展其父项的高度并导致滚动条。

Answer 1

根据我在 Chrome 和 Opera 中看到的 Flexbox 实现，列的 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;
}