Align elements in corners using Flexbox

Question

I am trying to put four elements in four corners of a flex-container using Flexbox and I'm struggling. I can't figure out how to justify the content of individual flex-items. Everytime I try, it ends up putting all content of the flex-container either to the left or right (or top/bottom depending on the main axis).

HTML:

<div class="container">
    <div class="top-left">
         TL
    </div>
    <div class="top-right">
        TR
    </div>
    <div class="bottom-left">
        BL
    </div>
    <div class="bottom-right">
       BR
    </div>
</div>

Here is my CSS:

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

.top-left {
 /* ? */
}

.top-right {

}

.bottom-left {

}

.bottom-right {

}

Here is a fiddle that illustrates what I'm trying to do:

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

Answer 1

Here is one approach for this (omitted prefixes for clarity): 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;
}