将元素均匀分布在列中 [英] Evenly distribute elements in columns

问题描述

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

I have a single div named .wrap within which items are placed. An unknown amount of items (.thing) should be arranged into four columns (stacking on top of each other).

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

列必须均匀分布，以便没有列为空.这将非常容易使用:

The columns need to be evenly distributed so that no column is empty. This would be very easy using:

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

但是，我相信column-fill仅适用于Firefox.

However, column-fill only works in Firefox, I believe.

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

Is there another CSS method to achieve this layout in all recent versions of browsers? Specifically, would flexbox be able to help here?

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

Please note that I cannot add extra divs to act as columns, and do not want a JS solution.

这里是一个小提琴，除了均匀分布外，它具有所需的布局→ http://jsfiddle.net/bpdtkmmt/

Here is a fiddle which has the desired layout except for the even distribution → http://jsfiddle.net/bpdtkmmt/

推荐答案

是的，您可以在此处使用Flexbox，它应该可以完成大部分工作.这有点骇人听闻，您已经放弃使用CSS列规则.可变性较小，因此，如果再添​​加任何行/列，则必须更改值.为了保留每行的列数，您将需要为包装器设置固定高度或百分比高度.在这里，您可以使用display: flex规则将包装容器建立为flex容器，并使用flex-direction: column和flex-wrap: wrap或简写方式flex-flow: column wrap建立多列.

Yes, you can use Flexbox here—and it should get the job done for the most part. It's sort of hacky and you have abandon using CSS column rules. There is somewhat less variability, so if you add any further rows/columns, you will have to change values. In order to preserve the number of columns per row, you will need to set a fixed or percentage height for the wrapper. From there, you establish the wrapper container as a flex container with the display: flex rule and establish multiple columns using either flex-direction: column and flex-wrap: wrap or the shorthand 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％).为了确保所有元素的大小均等，您需要使用

To make sure each column has x number of items in it, you will need to use the flex-basis rule and set to the percentage of the column you want to fill up. So a column with 3 items would have flex-basis: 33.33%. You indicated you want several rows of 3 items then a couple of rows of 2 items, so will need to use the nth-child or nth-of-type selector to establish a new flex-basis of 50% starting at the 10th element. And of course, you will have to establish a percentage for the width you want the thing element to take up on the page (4 rows = 25%). To make sure all elements are equally sized, you need to use the

但是，在flexbox中居中放置文本仍然是一个问题，您必须通过将display设置为flex或inline-flex并将flex-direction设置为column，将其作为flex容器来建立.将text-align和justify-content属性设置为center.

However, the centering the text in a flexbox remains a problem and you will have to establish the things as flex containers by setting display to flex or inline-flex with a flex-direction of column, along with text-align and justify-content properties set to center.

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

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

此CSS应该可以解决您的问题.

This CSS should solve your problems.

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

这篇关于将元素均匀分布在列中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！