플렉스 박스 레이아웃, 포장 문제

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>