html - 使用 flexbox 的网格布局

Question

有没有办法将第三个 flex-item 放在第一个 flex-item 的正下方？它根据具有最大宽度的 flex-item 调整它的位置。我如何解决它 ？

ul{
  display:flex;
  flex-wrap:wrap;
  list-style: none;
  border: 1px solid red;
  margin:0;
  padding:0;
}

li {
  background-color: lightblue;
  width: 50%;
  height: 100px;
  text-align:center;
}
.item2 {
  height:200px;
  background-color: yellow;
}

.item3 {
  background-color: magenta;
}

<ul class='flex-box'>
  <li class='item1'>1</li>
  <li class='item2'>2</li>
  <li class='item3'>3</li>
  <li class="item4">4</li>
</ul>