css - 列数 3 从不留下包含 1 项的行

Question

我注意到，当我在我的代码中使用 column-count: 3 时，我有 7 个元素。前两列各有 3 个元素，第三列只有一个元素(参见图片)。

这是 column-count 的正常行为，还是 column-count 应该平均填充所有列？

更新-

我试着弄乱了 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;。