如何使用css3 flexbox创建多列布局而不垂直扩展？ [英] How to use css3 flexbox to create multi-column layout without expanding vertically?

问题描述

我在Chrome中使用css3的flexbox（无需担心跨浏览器）。我很难说服我按照我想要的方式布置我的内容。这里是我的目标草图：

I'm playing with css3's flexbox in Chrome (no need to worry about cross-browser for this). I'm having a hard time convincing it to lay out my content the way I'd like. Here's a sketch of my goal:

这是我的尝试的jsFiddle： http ：//jsfiddle.net/Yht4V/2/ 这看起来工作得很好，除非每个 .group 将扩展其高度，而不是创建多个列。

Here's a jsFiddle of my attempt: http://jsfiddle.net/Yht4V/2/ This seems to work great except each .group will expand its height rather than create multiple columns.

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

I'm using flexbox pervasively here. The body lays out vertically, with the #content div taking the remaining height of the page. Each .group is laid out horizontally. Finally, each .item is laid out within a .group vertically with wrapping.

不幸的是，每个 .group 通过展开 #content 高度，这导致垂直滚动条（不需要）。如果我将每个 .group 的高度设置为固定的像素大小，则项目会分成多个列，但是会破坏flexbox的流动性。以下是固定高度的样子： http://jsfiddle.net/Yht4V/3/

Unfortunately, each .group ends up as a single column by expanding the #content height, which causes a vertical scrollbar (unwanted). If I set the height of each .group to a fixed pixel size, the items break out into multiple columns, but this defeats the fluidity of the flexbox. Here's what it looks like with fixed heights: http://jsfiddle.net/Yht4V/3/

所以，我如何让我的 #content div不能垂直扩展，因为一切都由flexboxs管理固定高度？我期望flexbox可以触发更多的列，而不是扩展其父级的高度并创建一个滚动条。

So, how can I get my #content div to not expand vertically since everything is managed with flexboxes without setting a fixed height? I was expecting the flexbox to trigger more columns instead of expanding the height of its parent and causing a scrollbar.

推荐答案

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

From what I've seen with the Chrome and Opera implementations for Flexbox, a flex-direction of column requires restricting the height of the element, otherwise it will continue expanding vertically. It doesn't have to be a fixed value, it can be a percentage.

也就是说，你需要为 .group 元素也可以通过使用CSS列模块来实现。元素的流向将类似于flexbox列方向，但它将创建列，只要有足够的宽度为他们，无论文档多长。

That said, the layout you want for your .group elements can also be achieved by using the CSS Columns module. The flow of the elements will be similar to that of the flexbox column orientation, but it will create columns as long as there's enough width for them, regardless of how long the document is.

http://jsfiddle.net/Yht4V/8/ （您必须原谅缺少前缀）

http://jsfiddle.net/Yht4V/8/ (you'll have to excuse the lack of prefixes)

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，可以得到：

Leaving it as a bunch of nested flexboxes, this was about as close as I could get it:

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

这篇关于如何使用css3 flexbox创建多列布局而不垂直扩展？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！