css - 弹性项目在其行中的项目之后下降（浮动）

Question

我试图在第一个元素之后在flex容器中使最后一个元素“浮动”。

三个项目，每个50%宽度，显示在 中。
每行两个元素。

第二(2) 项高于第一项。
第三项(3) 不会紧随第一项(1) 之后。它出现在第二个项目的高度之后。
是否有可能使第三个元素紧跟在第一个元素之后？（第二个元素的高度不应该影响第三个元素）

（我知道使用以下方法可以实现这一点：float。）

.flex-parent {
  display   : flex;
  flex-wrap : wrap;
}

.flex-item {
  width    : 50%;
  height   : 150px;
}

.flex-parent .flex-item:first-child {
  background: green;
}
.flex-parent .flex-item:nth-child(2) {
  background  : orange;
  height      : 200px;
}
.flex-parent .flex-item:last-child {
  background: yellow;
}

<div class="flex-parent">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

标签： cssflexbox