在列中均匀分布元素

Question

在列中均匀分布元素

15

我有一个名为.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/

- kthornbloom

没有列是空的。您需要用.thing的宽度或间隔来填充空白空间吗？ - Narek-T

@Narek-T 最后一列（第四列）对我来说似乎是空的。我正在使用Mac上的Chrome 47。 - kthornbloom

对我来说也是，但应该怎么做呢？抱歉我的英语不好。你有9个项目，想将它们分成4列。浏览器需要做什么？如果你放置8个项目，最后一列将不会为空。 - Narek-T

1

目前每列都有3个。应该有一个列有3个，其余每列有2个。我希望浏览器尽可能均匀地将它们分配到所有列中。 - kthornbloom

2个回答

2

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

例如：

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

- Adam Reis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- litel · Accepted Answer

是的，您可以在这里使用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个元素开始处建立新的flex-basis，为50％。当然，您还必须为您想要的元素在页面上占用的宽度建立一个百分比（4行= 25％）。为了确保所有元素大小相等，您需要使用

然而，在Flexbox中居中文本仍然是一个问题，您将不得不通过将display设置为flex或inline-flex并将flex-direction设置为column，以及将text-align和justify-content属性设置为center来将元素设置为Flex容器。

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

这段CSS应该能解决你的问题。

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

.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%;
}