Flexbox布局，包装问题

Question

我正在尝试构建一个包含大块和小块的布局。

我遇到的问题是我希望第4和第5块位于第2和第3下方。但是在我的小提琴中，它们会进入新的界限。

如何实现这一目标？

.blocks{
  list-style-type: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
li{
  width: 25%;
}
li.large{
  width: 50%;
}
img{
  width: 100%;
}

<ul class="blocks">
  <li class="large"><img src="http://placehold.it/350x250"></li>
  <li><img src="http://placehold.it/350x250"></li>
  <li><img src="http://placehold.it/350x250"></li>
  <li><img src="http://placehold.it/350x250"></li>
  <li><img src="http://placehold.it/350x250"></li>
  <li><img src="http://placehold.it/350x250"></li>    
</ul>

Answer 1

您需要更改HTML结构并将小li's换成另一个li > ul。

＆＃13;

＆＃13;

ul {
  list-style-type: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
ul > li {
  flex: 1;
}
ul ul li {
  flex: 0 0 50%;
}
img {
  width: 100%;
  vertical-align: top;
}

＆＃13;

<ul class="blocks">
  <li class="large"><img src="http://placehold.it/350x250"></li>
  <li>
    <ul>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
      <li><img src="http://placehold.it/350x250"></li>
    </ul>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;