Little Grid with Flexbox - css

Question

I try to create this little gallery grid with flexbox, but I fail all time.
Is it possible with flexbox?
Here is my example and fiddle.
<div class="gallery">
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
<div class="box four">Box 4</div>
<div class="box five">Box 5</div>
</div>
.gallery {
display:flex;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;}
.gallery .box {
background:#ccc;
height:250px;
width:33.33333%;}
.gallery .box.one,
.gallery .box.two {
-webkit-flex:1;
flex: 1;}
.gallery .box.three {
height:500px;}
.gallery .box.four,
.gallery .box.five {
-webkit-flex:1;
flex: 1;}

Answer 1

Ok, so have you tried using flex-direction: column? It requires a slight change in the way you think about flexbox. Try the following:
.gallery {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 200px; // or however you want to do it, required for wrapping
}
.box {
height: 100px;
}
.three {
height: 200px;
}

Answer 2

You can try something like this:
create 3 parent divs .
create two child divs in each 1st and 3rd div with width 100% and height 50%
and flex-direction column.
#grid{
width:100%;
height:500px;
background:#eee;
display:flex;
}
#p1,#p2,#p3{
width:33%;
border:2px solid #fff;
display:flex;
flex-direction:column;
}
#pone,#ptwo,#p31,#p32{
flex-basis:100%;
height:50%;
border:3px solid white;
}
<div id="grid">
<div id="p1">
<div id="pone">
</div>
<div id="ptwo">
</div>
</div>
<div id="p2">
</div>
<div id="p3">
<div id="p31">
</div>
<div id="p32">
</div>
</div>
</div>