title: Flexbox Two Rows Two Columns
body: <pre><code>&lt;div class="flexbox"&gt;
       &lt;div class="1"&gt;&lt;/div&gt;
       &lt;div class="2"&gt;&lt;/div&gt;
       &lt;div class="3"&gt;&lt;/div&gt;
       &lt;div class="4"&gt;&lt;/div&gt;
       &lt;div class="5"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  .flexbox{
   height:500px;
  width:500px;
  }
  </code></pre>
  
  <p>I want something like this  <a href="https://awwapp.com/s/b6c9c247-2dba-4ec9-a47d-1f165679ba03/" rel="noreferrer">https://awwapp.com/s/b6c9c247-2dba-4ec9-a47d-1f165679ba03/</a></p>
  
  <p>I cant change my structure . i want a solution with flexbox.</p>
  
  <p>Order of div dosent matter much as long as they have same one parent. </p>
  
  <p>I tried using <code>flex:wrap</code> . with width,height =  50% of two divs and width ,height = 50%,33.3% of rest three but it gave me somthing like <a href="https://awwapp.com/s/237968ae-c13f-4d0d-bab2-07024486b3c4/" rel="noreferrer">https://awwapp.com/s/237968ae-c13f-4d0d-bab2-07024486b3c4/</a></p>
  
  <p>.</p>
  
  <p>Can anyone Help me out ?</p>