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

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

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

    html, body {
        height: 100%;
    }

    .flex-parent {
        display: -webkit-flex;
        display: flex;
        width: 100%;
        height: 100%;
    }

    .col {
        -webkit-flex-direction: row-reverse; /* 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