Um exemplo bem simples é criar um "div pai":

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    /*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: column; /* Safari 6.1+ */
        flex-direction: column;
    }

    .flex-child {
        width: 100%;
        height: 100%;
        background-color: #c0c0c0;
        margin: 2px;
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->

- `flex-parent` é classe responsável por criar pais e avôs
- `flex-child` é para ocupar 100% do espaço (pode ser substituído e pode ser opcional, ou seja os filhos podem variar de tamanho), no entanto talvez seja melhor usar ela para evitar que a orientação de botões e formulários ou outras coisas dentro do flex sejam afetadas
- `col` muda a orientação dos filhos

----

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:


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    /*
    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%;
    }

<!-- language: lang-html -->

    <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>

<!-- end snippet -->