Large flex item next to 2x2 grid of flex items

Question

I'm trying to learn flexbox. This is the layout I want to reproduce:

Basically one big main box and the rest are small and create a mini grid.

 #test { display: flex; } .item { background-color: #444; padding: 5px 10px; margin: 5px; flex: 1 1 33%; } .item-1 { height: 50px; } .item-3 { order: 1; } 

 <div id="test"> <div class="item item-1"> A </div> <div class="item item-2"> B </div> <div class="item item-3"> C </div> <div class="item item-4"> D </div> </div> 

This is a link to the fiddle .

Answer 1

 #test { display: flex; } #test > div { flex: 0 0 48%; /* width of first flex item in main container */ height: 120px; } section { flex: 0 0 48%; /* width of second flex item in main container */ display: flex; /* nested flex container to arrange smaller items */ flex-wrap: wrap; /* make container multi-line */ } section > .item { flex: 0 0 40%; /* width of smaller items; two max per row */ height: 50px; } .item { background-color: #ccc; padding: 5px; margin: 5px; } 

 <div id="test"> <div class="item">A</div> <section><!-- NEW; nested flex container --> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </section> </div>