Css 如何使用flex box对页面进行网格化

我有一个包含两行和一列的容器，第一行的高度小于第二行。 现在，我希望使用flexbox的网格如下图所示：

我这样写：

.CONTAINER{
    display: flex;
    height: 100%;
    padding: 10px;
}

.FIRSTDIV{
    align-self: flex-start;
}

.SECONDDIV{
    align-self: center;
}

但结果是这样的：

---

如何使用flex-box实现第一个图像？

只需在容器类中添加

flex-flow:column

.CONTAINER{
    display: flex;
    height: 100%;
    padding: 10px;
    border:1px solid #f00;
    flex-flow:column;
}

.FIRSTDIV{
    align-self: flex-start;
    width:100%;
    height:50px;
    border:1px solid #000;
}

.SECONDDIV{
    align-self: center;
    width:100px;
    height:50px;
    border:1px solid #000;
    margin-top:20px;
}