列数3永远不会离开包含1个项目的行

Question

我注意到，当我在代码中使用column-count：3时，例如有7个项目。前两列将分别包含3个元素，而第三列将仅包含一个元素（例如，参见图片）。

这是列计数的正常行为，还是列计数应平均填充所有列？

已更新-

我尝试弄乱caiovisk的答案，并将代码从li元素更改为div，因为这就是我正在使用的。

这似乎很好用，但是在我的情况下，有时元素可能比其他元素大，导致出现间隙（请参见下图）。您如何使用flex方法解决此问题？

.columns-3 {
		flex-basis: calc(33.33% - 20px);
		margin: 10px;
	}
	.redBox {
		height: 50px;
		background-color: red;
	}
	.bigger {
		height: 150px;
	}

<div class="columns">
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox bigger"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
		<div class="columns-3 redBox"></div>
	</div>

Answer 1

检查（假设）li元素上是否有position:relative;。

Answer 2

是的，这是正常行为。它将按column-count上的指定值分隔元素或内容，然后在columns中显示。如果您使用ul，ol，div或任何非text的元素，它将垂直放置它们，这可能不是理想的结果，但是对于{ {1}}绝对有道理。 查看文档：{​​{3}}

如果您想将内部元素划分为列并水平划分，则可以使用text，请参见下面的方法：

flexbox

.columns{
    display: flex;
    flex-wrap: wrap;
}
.columns-2 li {
    flex-basis: 50%;
}
.columns-3 li {
    flex-basis: 33.3334%;
}
.columns-4 li {
    flex-basis: 25%;
}

已编辑

：

根据答案编辑，您已将<h1>2 Columns</h1> <ul class="columns columns-2"> <li>Column 1</li> <li>Column 2</li> <li>Column 3</li> <li>Column 4</li> <li>Column 5</li> <li>Column 6</li> <li>Column 7</li> </ul> <h1>3 Columns</h1> <ul class="columns columns-3"> <li>Column 1</li> <li>Column 2</li> <li>Column 3</li> <li>Column 4</li> <li>Column 5</li> <li>Column 6</li> <li>Column 7</li> </ul> <h1>4 Columns</h1> <ul class="columns columns-4"> <li>Column 1</li> <li>Column 2</li> <li>Column 3</li> <li>Column 4</li> <li>Column 5</li> <li>Column 6</li> <li>Column 7</li> </ul>设置为height: 50px;，这限制了该元素填充高度。将其设置为.redbox

min-height: 50px;

.redBox {
        min-height: 50px;
        ...
}

.columns {
		display: flex;
    flex-flow: wrap;
}
.columns.columns-3 > div {
    flex-basis: calc(33.33% - 20px);
    margin: 10px;
}
.columns.redBox > div {
    min-height: 50px;
    background-color: red;
}
.bigger {
    height: 150px;
}