在列中均匀分布元素

Question

我有一个名为div的.wrap项目.未知数量的项目(.thing)应排列成四列(彼此堆叠).

<div class="wrap">
    <div class="thing"> thing1 </div>
    <div class="thing"> thing2 </div>
    ...
</div>

列需要均匀分布,以便没有列为空.这很容易使用:

.wrap {
    column-count: 4;
    column-fill: balance;
}

但是,column-fill我相信,只适用于Firefox.

是否有另一种CSS方法可以在所有最新版本的浏览器中实现此布局？具体来说,flexbox能够在这里提供帮助吗？

请注意,我不能添加额外的div作为列,并且不需要JS解决方案.

这是一个小提琴,除了偶数分布之外还有所需的布局→ http://jsfiddle.net/bpdtkmmt/

Answer 1

是的，你可以在这里使用 Flexbox——它应该可以完成大部分工作。这有点hacky，您已经放弃使用CSS 列规则。可变性稍小，因此如果您添加任何其他行/列，您将不得不更改值。为了保留每行的列数，您需要为包装器设置固定高度或百分比高度。从那里，您使用display: flex规则将包装容器建立为 flex 容器，并使用flex-direction: columnandflex-wrap: wrap或速记建立多个列flex-flow: column wrap。

为了确保每列中有 x 个项目，您需要使用flex-basis规则并将其设置为要填充的列的百分比。因此，包含 3 个项目的列将具有flex-basis: 33.33%. 您表示您想要几行 3 个项目，然后是几行 2 个项目，因此需要使用nth-childornth-of-type选择器来建立50%从第 10 个元素开始的新 flex-basis 。当然，您必须为想要事物元素在页面上占据的宽度建立一个百分比（4 行 = 25%）。为了确保所有元素的大小相同，您需要使用

但是，在 flexbox 中居中文本仍然是一个问题，您必须通过设置display为flex或inline-flex使用 a flex-directionofcolumn以及将text-align和justify-content属性设置为来将事物建立为 flex 容器center。

justify-content: center; 
flex-direction: column;
text-align: center

http://jsfiddle.net/hxcnokx9/10/

这个 CSS 应该可以解决你的问题。

.wrap {
    height: 180px;
    background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.thing {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    width: 25%;
    flex-basis: 33.33%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.thing:nth-child(1n+10) {
   flex-basis: 50%;
}