使用display无法使砌体布局工作：flex

Question

我正在尝试复制我使用CSS做的砌体布局。我认为flexbox是一个有效的选项，而不是网格系统。但是当我试图将右上角和右下角的盒子相互对齐时，我遇到了麻烦。

我已经尝试将它们放在另一个容器中，对我想要的元素使用flex-direction: column和align-self，但没有任何成功。

甚至可以使用flexbox做我想要实现的目标吗？或者我应该使用不同的方法？

非常感谢任何帮助！

我想要的是什么：

flexbox的结果：

这是我的代码：

.container1{
	height: 420px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
}

.item{
	margin:10px;
	background-color: #F1F1F1;

}

.box{
	height: 420px;
	width: 700px;
}

.tall{
	height: 420px;
	width: 215px;

}

.long{
	height: 215px;
	width: 458px;

}

.square{
	height: 215px;
	width: 215px;

}

<div class="container1">
  <div class="item box"></div>
  <div class="item tall"></div>
  <div class="item square"></div>
  <div class="item long"></div>
  <div class="item long"></div>
  <div class="item tall"></div>
</div>