16

我在 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那么，由于所有内容都使用弹性框进行管理而没有设置固定高度，我怎样才能让我的div 不垂直扩展？我期待 flexbox 触发更多列，而不是扩展其父级的高度并导致滚动条。

4

2 回答 2

10

从我在 Flexbox 的 Chrome 和 Opera 实现中看到的情况来看，a flex-directionof column 需要限制元素的高度，否则它将继续垂直扩展。它不必是一个固定值，它可以是一个百分比。

也就是说，您想要的.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;
}

把它当作一堆嵌套的弹性盒，这是我能得到的最接近的：

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;
}
于 2013-02-23T18:33:13.577 回答
0

在您的 css - display 中替换以下内容 ：-webkit-flex; 到以下 - 显示：-webkit-box；

这对我来说效果很好:-)

于 2013-08-11T13:45:01.470 回答