使用Flexbox对齐角落中的元素

我试图将四个元素放在flex-container使用Flexbox的四个角落,我正在努力.我无法弄清楚如何证明个人的内容flex-items.每当我尝试时,它最终将所有内容放在flex-container左侧或右侧(或顶部/底部,取决于主轴).

HTML:

    

         TL
    
    

        TR
    
    

        BL
    
    

       BR
    

这是我的CSS:

.container {
    display: -webkit-flex;
    background-color:#ccc;
}

.top-left {
 /* ? */
}

.top-right {

}

.bottom-left {

}

.bottom-right {

}

这是一个小提琴,说明我正在尝试做什么:

http://jsfiddle.net/JWNmZ/8/

这是一种方法(为清晰起见,省略了前缀):http://jsfiddle.net/JWNmZ/10/

.container {
    display: flex;
    flex-wrap: wrap;
    background-color:#ccc;
}

.top-left {
    flex: 50%; 
}

.top-right {
    flex: 50%;
    text-align: right;
}

.bottom-left {
    flex: 50%;
}

.bottom-right {
    flex: 50%;
    text-align: right;
}