Alignment of items with Flexbox

Question

I want to create a layout in which the first div uses 100% of the width of a section and the others divs use 50%, creating a block.

However, by adding more than 3 divs they don’t line up like in the first picture even using the property flex-wrap.

How do I align 2 elements in each row after the first line you have width 100%?

Html code :

<main>
 <section>    
  <div></div> 
  <div></div>                 
  <div></div> 
  <div></div>                  
 </section>   

 <aside> 
 </aside>

</main>

código css :

main section, main aside {
 flex: 1;
 border: 1px solid #000;
 display: flex;
 width: 512px;
 flex-direction: row;
 box-sizing: border-box;
 flex-wrap: wrap;
}

main section {
 background : green;
}

main aside {
 background : blue;
}

main section div {
 border: 1px solid #000;
 flex-grow: 1;
}

main section div:nth-child(1) {
 background: red;
 width: 100%;
}

main section div:nth-child(2) {
 background: yellow;

}

main section div:nth-child(3) {
 background: purple;
}

main section div:nth-child(4) {
 background: brown;

}

main section div:nth-child(5) {
 background: gray;
}

Answer 1

I believe the best way would be first you split in two section and aside like you did. Then in the section that is left you use the property flex-wrap and soon you’ll have the layout down below.

The banner is 100% of the father’s width, and 1,2,3,4,50%

Follow the image code above

*:not(body):not(html) {
  box-sizing: border-box;
  border: 1px solid #000;
} 
main {
  display: flex;
  flex-wrap: wrap;
}
section {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}
div, aside {
  width: 50%;
}
.n1 {
  width: 100%;
}

  

<main>
  <section>
    <div class="n1">banner</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </section>
  <aside>
    aside
  </aside>
  <div class="n1">uma div</div>
</main>