フレックスボックスのレイアウト、ラッピングの問題

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 > ulに小さなli'sをラップする必要があります。

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; 
 
}

<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>