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选择器来建立50%开始的新Flex基础在第10个元素。当然，您必须为要在页面上占据元素元素的宽度建立一个百分比（4行= 25％）。要确保所有元素的大小相同，您需要使用

但是，将文本居中放置在弹性框中仍然存在问题，您必须将display设置为flex或inline-flex并{{1}将其设置为弹性容器} flex-direction，column和text-align属性设置为justify-content。

center

http://jsfiddle.net/hxcnoxx9/10/

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

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

在列中均匀分布元素

1 个答案: