2x2 Box beside 1 big 2x2 size box using css

Question

Is it possible to make like on a ul li structure with flexbox? I tried making the squares width set on 25% and the 1st, 3rd or the 5th one to 50% width with a trick of

Answer 1

I am trying to solve this 2*2 box using flexbox. Please Saw the link.

   
5
   

      
1
     
2
     
3
     
4
   



    .box{
  width: 500px;
  height:100%;
  display: flex;

}


.left {
  width: 200px;
  height:200px;
  background: #000;
  list-style:none;
}

.right{
  display: flex;
  flex-flow:wrap;
  justify-content: space-around;

}

.right li{
  width:95px;
  height:95px;
  background: #000;
  margin: 5px;
  flex:1 1 50;
  list-style:none;
}

Jsbin