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

Posted 2023-03-06

【中文标题】如何使用css3 flexbox创建多列布局而不垂直扩展？

【英文标题】：How to use css3 flexbox to create multi-column layout without expanding vertically?

【发布时间】：2012-12-13 01:31:08

【问题描述】：

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

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

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

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

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

【问题讨论】：

无论你把窗户做成多大/小，整个事情都应该是流动的吗？为什么项目有固定的 200px 宽度？任何 .group 都应该有列还是只有第一个？应该有任何溢出吗？ （如果我向每个组添加 100 个项目会怎样） Flexbox 不会像您想要的那样制作可堆叠的列，这不是 flexbox 的布局目标。在你的图片中得到你想要的很容易我只是不知道所有的缩放要求，这可能会使仅使用 CSS 变得非常困难或不可能。

@skyline3000 我正在尝试使用纯 html/CSS 的 Windows 8“metro”风格设计，因此理想情况下，每个组都会根据需要水平添加列并导致水平滚动条 iff 必要（所以首先垂直添加元素，然后水平按列换行）。我可以想象用 JS 来实现这一点的方法，但希望它可以只用 Webkit 中的 HTML5/CSS3 来完成。

@skyline3000 直接回答您的问题：是的，无论屏幕的高度/宽度如何，它都应该是流畅的（我无法控制屏幕大小）。每个项目的设计都是固定大小的，这对于我的最终实现来说是正确的。也许不是那些确切的尺寸，但仍然是固定的。最后，正如我上面提到的，元素应该垂直填充然后水平溢出。

【参考方案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;

【参考方案2】：

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

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