/*o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar*/
html, body {
height: 100%;
}
.flex-parent {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
}
.col {
-webkit-flex-direction: row-reverse;column; /* Safari 6.1+ */
flex-direction: column;
}
.flex-child {
width: 100%;
height: 100%;
background-color: #c0c0c0;
margin: 2px;
}
<div class="flex-parent col">
<div class="flex-parent">
<div class="flex-parent">
<div class="flex-child">Filho 0</div>
</div>
<div class="flex-parent col">
<div class="flex-child">Filho 1</div>
<div class="flex-child">Filho 2</div>
</div>
</div>
<div class="flex-parent">
<div class="flex-child">Filho 1</div>
<div class="flex-child">Filho 2</div>
<div class="flex-child">Filho 3</div>
</div>
</div>
Se tem alguma preocupação com navegadores mais antigos, como alguns mobile por exemplo, pode experimentar usando float: ...;
e ajustando a porcentagem da largura e altura conforme necessário, um exemplo:
/*
o BODY no doctype HTML5 ou Strict não ocupa 100%, então isso deve ajustar
A margem afeta os elementos filhos, então neste caso é melhor remover
*/
html, body {
margin: 0;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.row {
width: 100%;
height: 50%;
}
.big-block {
width: 66.6665%;
height: 100%;
float: left;
}
.v-block {
float: left;
width: 33.3335%;
height: 100%;
}
.child {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.v-block > .child {
height: 50%;
}
.row > .child {
float: left;
width: 33.3335%;
height: 100%;
}
<div class="main">
<div class="row">
<div class="big-block">
<div class="child">Filho 0</div>
</div>
<div class="v-block">
<div class="child">Filho 1</div>
<div class="child">Filho 2</div>
</div>
</div>
<div class="row">
<div class="child">Filho 3</div>
<div class="child">Filho 4</div>
<div class="child">Filho 5</div>
</div>
</div>