Wyrównanie elementów w rogach za pomocą Flexbox

Question

Próbuję umieścić cztery elementy w czterech rogach flex-container używając Flexbox i walczę. Nie mogę wymyślić, jak uzasadnić treść poszczególnych flex-items. Za każdym razem, gdy próbuję, kończy się umieszczanie całej zawartości flex-container albo w lewo albo w prawo (lub góra/dół w zależności od głównej osi).

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> 

Oto mój CSS:

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

.top-left { 
/* ? */ 
} 

.top-right { 

} 

.bottom-left { 

} 

.bottom-right { 

} 

Oto skrzypce, który ilustruje to, co usiłuję zrobić:

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

Answer 1

Oto jedno podejście do tego (pominięte przedrostki dla jasności): 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; 
}