Align items in corners with Flexbox

Question

I'm trying to put four elements in the four corners of a flex-container using Flexbox, and I'm scared. I cannot figure out how to justify the content of individual flex-items . Each time I try, it puts all the contents of flex-container 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; }