获取 flexbox 列换行以使用全宽并最小化高度

Posted 2023-03-06

【中文标题】获取 flexbox 列换行以使用全宽并最小化高度

【英文标题】：Get flexbox column wrap to use full width and minimize height

【发布时间】：2014-10-16 07:15:05

【问题描述】：

我有一个固定宽度和可变高度的容器。我正在用未知数量的元素填充容器。 我希望元素按列排列，从上到下，然后从左到右。

我可以使用column，但是我不知道子元素的最大宽度，所以我不能设置column-width或column-count。

我认为display: flex 和flex-flow: column wrap 是要走的路，但如果我在容器上维护height: auto，它将生成为单个列，而无需包装元素以使用所有可用宽度。

我可以说服 flexbox 使用所有可用的宽度，从而最小化容器的高度吗？ 您会提出不同的解决方案吗？

---

小提琴：http://jsfiddle.net/52our0eh/

来源：

html：

<div>
    <span>These</span>
    <span>should</span>
    <span>arrange</span>
    <span>themselves</span>
    <span>into</span>
    <span>columns,</span>
    <span>using</span>
    <span>all</span>
    <span>available</span>
    <span>width</span>
    <span>and</span>
    <span>minimizing</span>
    <span>the</span>
    <span>container's</span>
    <span>height.</span>
</div>

CSS：

div 
    outline: 1px solid red;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    /*height: 8em;*/

span 
    outline: 1px solid blue;

【问题讨论】：

2022 年仍在努力想出一个好的解决方案......！

【参考方案1】：

您查找的更像是列规则：DEMO

div /* do not set column numbers rule */
    width: 100%;
    -moz-column-width:4em;
    column-width:4em;
    -moz-column-gap:0;
    column-gap:0;
    -moz-column-rule:solid 1px;
    column-rule:solid 1px;
    text-align:center;

【讨论】：

我事先不知道子元素的宽度，可能超过4em。

@Thoronwen 设置您认为可以的任何宽度，或设置固定数量的列。或使用 javascript 或 jquery 即时设置/调整列宽。

this article 仍然适用于多列属性

【参考方案2】：

我已经妥协并在容器元素上设置了height: 10em（这似乎可以接受）和overflow-y: auto（在溢出的情况下添加水平滚动条）。

不过，我仍然想知道是否有办法使用所有可用宽度并最小化高度。

【参考方案3】：

最后，溢出的选项是隐藏、滚动或换行。这个版本怎么样？它需要任何溢出的项目并将它们放在第二行。第二行的项目仍会填满可用空间，但由于共享空间的项目数量较少，因此会更大。

http://jsfiddle.net/52our0eh/14/

div 
    outline: 1px solid red;
    display: flex;
    flex-flow: row wrap;

span 
    outline: 1px solid blue;
    flex:1;

【讨论】：

上面的示例没有按预期工作。高度不是最小的，也没有发生包装。