在列中均匀分布元素

Question

我有一个名为.wrap的 div，其中放置了项目。 未知数量的项目 ( .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: column和flex-wrap: wrap或简写flex-flow: column wrap建立多个列。

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

然而，将文本居中放置在flexbox中仍然存在问题，您必须通过将display设置为flex或inline-flex以及flex-direction of column ，以及text-align和justify-content属性来将事物设置为flex容器设为center 。

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

http://jsfiddle.net/hxcnoxx9/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%;
}

Answer 2

2022 年，您现在可以安全地使用column-count ，因为 所有浏览器都完全支持它。

例子：

.wrap {
  column-count: 3;
  column-gap: 1rem;
}