Flexbox Two Rows Two Columns

Question

<div class="flexbox">
     <div class="1"></div>
     <div class="2"></div>
     <div class="3"></div>
     <div class="4"></div>
     <div class="5"></div>
</div>

.flexbox{
 height:500px;
width:500px;
}

I want something like this https://awwapp.com/s/b6c9c247-2dba-4ec9-a47d-1f165679ba03/

I cant change my structure . i want a solution with flexbox.

Order of div dosent matter much as long as they have same one parent.

I tried using flex:wrap . with width,height = 50% of two divs and width ,height = 50%,33.3% of rest three but it gave me somthing like https://awwapp.com/s/237968ae-c13f-4d0d-bab2-07024486b3c4/

.

Can anyone Help me out ?

Answer 1

Hope this will be the solution four your problem

.flexbox{
  height: 500px;
  width: 500px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flexbox div {
  width: 40%;
  background: green;
  height: 30%;
}
.flexbox .one, .flexbox .two{
  height: 45%;
}

<div class="flexbox">
  <div class="one">one</div>
  <div class="two">two</div>
  <div class="three">three</div>
  <div class="four">four</div>
  <div class="five">five</div>
</div>

Here is the working jsFiddle demo.