Flexbox - How to create a responsive dynamic flexbox grid - css

Question

I want to learn and try Flexbox therefore just to build a grid construct that looks like this:
Possible sizes of boxes: 4x4, 2x1, 1x1 - they are to be dynamic anywhere.
Responsive to all boxes to the same size
Actually i have this :
.tab {
width: 500px;
height: 100px;
display: flex;
flex-flow: column wrap-reverse;
color: green;
}
.col-wrap-4x4 {
width: 200px;
height: 200px;
display: flex;
flex-flow: column wrap;
}
.col-1x1 {
background-color: black;
border: solid 1px green;
}
.col-1x1.one {
width: 50px;
height: 50px;
}
.col-1x1.two {
width: 100px;
height: 50px;
}
.col-1x1.four {
width: 100px;
height: 100px;
}
<div class="tab">
<div class="col-wrap-4x4">
<div class="col-1x1 four">1</div>
<div class="col-1x1 two">2</div>
<div class="col-1x1 one">3</div>
<div class="col-1x1 one">4</div>
</div>
</div>
Everything I've tried so far has not worked.
Does such a thing anyway?

Answer 1

Like this?
Don't forget that ur parent element must be as big as ur child's + border or margin
.tab {
width: 604px;
height: 100px;
flex-flow: column wrap-reverse;
display: block;
color: green;
}
.col-wrap-4x4 {
width: 230px;
height: auto;
display: inline-block;
flex-flow: column wrap;
}
.col-1x1 {
background-color: black;
/*border: solid 1px green;*/
}
.col-1x1.one {
width: 50px;
height: 50px;
}
.col-1x1.two {
width: 110px;
height: 50px;
}
.col-1x1.four {
width: 100px;
height: 110px;
}
.myClass{
display: inline-block;
float: left;
position: relative;
margin : 10px 5px 0;
}
<div class="tab">
<div class="col-wrap-4x4">
<div class="col-1x1 myClass four">1</div>
<div class="col-1x1 myClass two">2</div>
<div class="col-1x1 myClass one">3</div>
<div class="col-1x1 myClass one">4</div>
</div>
</div>
Greetz