flexbox可用于“打包”列表中的项目吗？

Question

使用flexbox，并基于以下标记，是否可以使列表中的最后一项可视地向上移动并将其“打包”到可用空间中？

我知道这可以使用不同的标记（每列中有3列和项目）来完成，使用浮点数或弹性框，但我很好奇这是否是flexbox可以对此标记执行的操作。

html,
body {
	height: 100%;
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.layout {
	background-color: yellow;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

.layout__item {
	background-color: red;
	width: 33.33%;
	padding-right: 15px;
}

/* Every 3rd item. */
.layout__item:nth-child(3n) {
	padding-right: 0;
}

/* Every item after the first 3. */
.layout__item:nth-child(n+4) {
	padding-top: 15px;
}

.layout__item-content {
	background-color: green;
	height: 100%;
}

.layout__item-img {
	background-color: blue;
	height: 100%;
}

<ul class="layout">
	<li class="layout__item">
		<div class="layout__item-content">
			<div class="layout__item-img" style="height:300px"></div>
			<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quos voluptates impedit optio id, fugit, nobis assumenda eveniet, veniam deserunt eum magni. Voluptates quam, deserunt sit pariatur ducimus omnis eligendi!</div>
		</div>
	</li>
	<li class="layout__item">
		<div class="layout__item-content">
			<div class="layout__item-img" style="height:100px"></div>
			<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, saepe!</div>
		</div>
	</li>
	<li class="layout__item">
		<div class="layout__item-content">
			<div class="layout__item-img" style="height: 200px;"></div>
			<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia placeat quidem, illum cumque nisi repellat excepturi iusto aperiam tempore quam.</div>
		</div>
	</li>
	<li class="layout__item">
		<div class="layout__item-content">
			<div class="layout__item-img" style="height:150px;"></div>
			<div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas natus odio quae nam officia libero.</div>
		</div>
	</li>
	<li class="layout__item">
		<div class="layout__item-content">
			<div class="layout__item-img" style="height: 321px;"></div>
			<div class="layout__item-text">Lorem ipsum dolor sit amet.</div>
		</div>
	</li>
</ul>